CSS Calc 뷰포트 단위 해결 방법?
다른 답변 에서 본 것에서 CSS 뷰포트 단위는 calc()아직 문 에서 사용할 수 없습니다 . 내가 달성하고 싶은 것은 다음 진술입니다.
height: calc(100vh - 75vw)
뷰포트 단위를 문 에서 사용할 수 없더라도 순수 CSS를 사용하여 이를 달성 할 수있는 몇 가지 해결 방법이 calc()있습니까? 아니면 CSS와 HTML? 나는 자바 스크립트를 사용하여 동적으로 할 수 있다는 것을 알고 있지만 CSS를 선호합니다.
대답하기 전에 Chrome 및 IE 10+가 실제로 뷰포트 단위로 계산을 지원한다는 점을 지적하고 싶습니다.
FIDDLE (IE10 +에서)
솔루션 (다른 브라우저 용) : 박스 크기 조정
1) 키를 100vh로 설정하여 시작하십시오.
2) box-sizing이 border-box로 설정된 경우-패딩 상단을 75vw로 추가합니다. 이것은 패딩이 내부 높이의 일부가됨을 의미합니다.
3) 여분의 패딩 상단을 음수 여백 상단으로 오프셋하십시오.
깡깡이
div
{
/*height: calc(100vh - 75vw);*/
height: 100vh;
margin-top: -75vw;
padding-top: 75vw;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: pink;
}
해결 방법으로 수직 패딩 비율 및 여백이 컨테이너 너비에서 계산되는 사실을 사용할 수 있습니다. 그것은 매우 추한 해결책이며 당신이 그것을 사용할 수 있을지 모르겠지만 잘 작동합니다 : http://jsfiddle.net/bFWT9/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>It works!</div>
</body>
</html>
html, body, div {
height: 100%;
}
body {
margin: 0;
}
div {
box-sizing: border-box;
margin-top: -75%;
padding-top: 75%;
background: #d35400;
color: #fff;
}
<div>It's working fine.....</div>
div
{
height: calc(100vh - 8vw);
background: #000;
overflow:visible;
color: red;
}
이 CSS 코드는 지금 Opera가없는 모든 브라우저를 지원합니다.
라이브
CSS 그리드로이 작업을 수행하는 것은 매우 쉽습니다. 트릭은 그리드의 높이를 100vw로 설정 한 다음 행 중 하나를 75vw에 할당하고 나머지 행 (선택 사항)을 1fr에 할당하는 것입니다. 이것은 내가 당신이 추구하는 것이라고 생각하는 것에서 비율 고정 크기 조정 컨테이너를 제공합니다.
예 : https://codesandbox.io/s/21r4z95p7j
원하는 경우 다른 "항목"을 추가하기 만하면 하단 거터 공간을 활용할 수도 있습니다.
편집 : StackOverflow의 내장 코드 실행기에는 몇 가지 부작용이 있습니다. codesandbox 링크로 이동하면 실제 비율을 볼 수 있습니다.
body {
margin: 0;
padding: 0;
background-color: #334;
color: #eee;
}
.main {
min-height: 100vh;
min-width: 100vw;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 75vw 1fr;
}
.item {
background-color: #558;
padding: 2px;
margin: 1px;
}
.item.dead {
background-color: transparent;
}<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/index.css" />
</head>
<body>
<div id="app">
<div class="main">
<div class="item">Item 1</div>
<!-- <div class="item dead">Item 2 (dead area)</div> -->
</div>
</div>
</body>
</html>참조 URL : https://stackoverflow.com/questions/21224411/css-calc-viewport-units-workaround
'programing' 카테고리의 다른 글
| CORS 요청-쿠키가 전송되지 않는 이유는 무엇입니까? (0) | 2021.01.15 |
|---|---|
| CSS : before 및 : first-child 결합 (0) | 2021.01.15 |
| R에서 이메일을 어떻게 보내나요? (0) | 2021.01.15 |
| 3D 충돌 / 물체 감지는 어떻게 작동합니까? (0) | 2021.01.15 |
| 사용자 컨트롤과 Windows Form (0) | 2021.01.15 |