Div를 만드는 방법 브라우저 창의 100 % 높이
질문
나는 두 개의 열이있는 레이아웃을 가지고 있습니다 - 왼쪽 Div와 오른쪽 Div.
오른쪽 DIV에는 회색 배경색이 있으며 사용자의 브라우저 창의 높이에 따라 수직으로 확장해야합니다.지금 당장 배경색은 그 DIV의 마지막 콘텐츠에서 끝납니다.
나는 100 %, min-height : 100 %; 등을 보았습니다.
답변
몇 가지 CSS 3 측정 단위가 있습니다.
뷰포트 백분율 (또는 뷰포트 상대) 길이
뷰포트 백분율 길이는 무엇입니까?
링크 된 W3 후보 권장 사항에서 위 :
뷰포트 백분율 길이는 초기 함유 블록의 크기를 기준으로합니다.초기 함유 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.
이 단위는 VH (뷰포트 높이), VW (뷰포트 너비), VMIN (뷰포트 최소 길이) 및 VMAX (뷰포트 최대 길이)입니다.
디바이더가 브라우저의 높이를 채우는 데 어떻게 사용될 수 있습니까?
이 질문을 위해 우리는 VH : 1VH를 사용하여 뷰포트의 높이의 1 %와 같습니다.즉, 원소가 DOM 트리에 위치한 위치에 관계없이 브라우저 창의 높이와 같습니다.
HTML.
<div></div>
CSS.
div {
height: 100vh;
}
이것은 문자 그대로 필요한 모든 것입니다.다음은 사용중인 JSFiddle 예제입니다.
이러한 새로운 유닛을 지원하는 브라우저는 무엇입니까?
이는 현재 Opera Mini와는 다른 모든 최신 주요 브라우저에서 지원됩니다.체크 아웃 ... 추가 지원을 위해 사용할 수 있습니다.
이것이 여러 열에 어떻게 사용될 수 있습니까?
왼쪽 및 오른쪽 분배기가있는 손에있는 질문의 경우에는 VH와 VW와 관련된 두 열 레이아웃을 보여주는 JSFiddle 예제가 있습니다.
100VH는 100 %와 어떻게 다른가요?
예를 들어이 레이아웃을 가져 가십시오.
<body style="height: 100%">
<div style="height: 200px">
<p style="height: 100%; display: block;">Hello, world!</p>
</div>
</body>
여기서 P 태그는 100 % 높이로 설정되지만 함유 된 Div는 200 픽셀 높이를 가지기 때문에 200 픽셀의 100 %가 신체 높이의 100 %가 아닌 200 픽셀이되지 않기 때문입니다.대신 100V를 사용하면 P 태그가 DIV 높이에 관계없이 몸의 100 % 높이가 될 것이라는 것을 의미합니다.그 차이를 쉽게 볼 수 있도록 이와 같은 JSFiddle을 살펴보십시오!
답변
다음은 예제입니다.
body, html {
height: 100%;
}
#right {
height: 100%;
}
답변
당신이 당신의 요소를 절대적으로 배치 할 수 있다면,
position: absolute;
top: 0;
bottom: 0;
그것을 할 것입니다.
답변
전체 페이지를 '뷰포트'라고하며 CSS3의 뷰포트에 따라 요소를 디자인 할 수 있습니다.
이러한 단위를 뷰포트 백분율 길이라고하며 초기 함유 블록의 크기를 기준으로합니다.
뷰포트 - 높이를 VH라고합니다.페이지의 전체 높이는입니다 100Vh. Viewport-Width를 VW라고합니다.페이지의 전체 높이는입니다 100VW. VMIN (뷰포트 최소 길이) 및 VMAX (뷰포트 최대 길이).
이제 귀하의 문제를 귀하의 CSS에 추가하여 귀하의 문제를 쉽게 해결할 수 있습니다.
.classname-for-right-div /*You could also use an ID*/ {
height: 100vh;
}
다음은 뷰포트 상대 길이에 대한 정보입니다
답변
VH가있는 탑 투표 한 것들을 포함한 다른 모든 솔루션은 Flex 모델 솔루션과 비교할 때 하위 최적입니다.
CSS Flex 모델의 출현으로 100 % 높이 문제를 해결하면 매우 쉽습니다. 높이 : 100 % 사용;디스플레이 : 부모의 플렉스 (Flex) 및 Flex : 1 자식 요소에 1.그들은 자동으로 컨테이너에서 사용 가능한 모든 공간을 차지할 것입니다.
마크 업과 CSS가 얼마나 간단한 지에 주목하십시오.테이블 해킹이나 아무것도 없습니다.
플렉스 모델은 모든 주요 브라우저뿐만 아니라 IE11 +에서 지원됩니다.
html, body { 높이 : 100 %; } 신체 { 디스플레이 : 플렉스; } .왼쪽 오른쪽 { Flex : 1; } .왼쪽 { 배경 : 오렌지; } .오른쪽 { 배경 : 시안; }
플렉스 모델에 대해 자세히 알아보십시오.
답변
여기서 모든 답변을 가지고 있더라도 나는 그 문제를 정말로 해결하지 못한다는 것을 알게되어 놀랐습니다.100V Height / min 높이를 사용한 경우 콘텐츠가 페이지보다 긴 때 레이아웃이 끊어졌습니다.대신 100 % 높이 / 최소 높이를 사용하면 내용이 페이지 높이보다 작 으면 레이아웃이 끊어졌습니다.
내가 발견 한 솔루션은 두 가지 경우를 해결 한 것으로, 두 가지 답변을 결합하는 것이 었습니다.
html, body, #mydiv {
height: 100%;
min-height: 100vh;
}
최근댓글