div 와 오른쪽 div 두 열이 있는 레이아웃이 있습니다.
오른쪽 div 에는 회색 background-color 가 있으며 사용자의 브라우저 창 높이에 따라 세로로 확장해야 합니다. 현재 background-color div 의 마지막 콘텐츠에서 끝납니다.
나는 height:100% , min-height:100%; , 등.
반응형
질문자 :mike
CSS 3 측정 단위에는 다음과 같은 몇 가지가 있습니다.
뷰포트 백분율 (또는 뷰포트 상대) 길이
뷰포트 백분율 길이란 무엇입니까?
위의 링크된 W3 Candidate Recommendation에서:
뷰포트 백분율 길이는 초기 포함 블록의 크기에 상대적입니다. 초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.
이러한 단위는 vh (뷰포트 높이), vw (뷰포트 너비), vmin (뷰포트 최소 길이) 및 vmax (뷰포트 최대 길이)입니다.
디바이더가 브라우저의 높이를 채우도록 하려면 이것을 어떻게 사용할 수 있습니까?
이 질문에 대해 vh 사용할 수 있습니다. 1vh 는 뷰포트 높이의 1%와 같습니다. 즉, 100vh 는 DOM 트리에서 요소의 위치에 관계없이 브라우저 창의 높이와 같습니다.
HTML
<div></div>CSS
div { height: 100vh; }이것은 말 그대로 필요한 전부입니다. 다음은 사용 중인 JSFiddle 예제 입니다.
이러한 새 장치를 지원하는 브라우저는 무엇입니까?
이것은 현재 Opera Mini를 제외한 모든 최신 주요 브라우저에서 지원됩니다. 추가 지원을 위해 사용할 수 있습니까... 를 확인하십시오.
여러 열과 함께 이것을 어떻게 사용할 수 있습니까?
왼쪽 및 오른쪽 구분선이 있는 vh 와 vw 모두 포함하는 2열 레이아웃을 보여주는 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픽셀의 body 높이의 100%가 아니라 200픽셀이 됩니다. 대신 100vh 를 사용 p div 높이에 관계없이 body 의 100% 높이가 됩니다. 함께 제공되는 이 JSFiddle 을 살펴보고 차이점을 쉽게 확인하세요!
James Donnelly
<div> 나 어떤 요소의 높이를 설정하려면 <body> 와 <html> 의 높이도 100%로 설정해야 합니다. 그런 다음 요소의 높이를 100%로 설정할 수 있습니다. :)
다음은 예입니다.
body, html { height: 100%; } #right { height: 100%; }Ariona Rian
요소를 절대적으로 배치할 수 있다면
position: absolute; top: 0; bottom: 0;할 것입니다.
Tinister
CSS에서 뷰포트 단위를 사용할 수 있습니다.
HTML:
<div id="my-div">Hello World!</div>CSS:
#my-div { height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */ }MrGeek
이 경우 뷰포트 높이의 1%에 vh 를 사용할 수 있습니다.
즉, 높이를 100vh 려면 100vh 를 사용하면 됩니다.
내가 여기에 당신을 위해 그린 아래 이미지를보십시오 :
아래와 같이 내가 만든 스니펫을 사용해 보세요.
.left { height: 100vh; width: 50%; background-color: grey; float: left; } .right { height: 100vh; width: 50%; background-color: red; float: right; } <div class="left"></div> <div class="right"></div>Alireza
vh 가 있는 최상위 투표 솔루션을 포함한 다른 모든 솔루션 은 플렉스 모델 솔루션과 비교할 때 차선책입니다.
CSS flex 모델 의 출현으로 100% 높이 문제를 해결하는 것이 매우 쉬워졌습니다. use height: 100%; display: flex 는 부모 flex: 1 은 자식 요소에 사용합니다. 컨테이너에서 사용 가능한 모든 공간을 자동으로 차지합니다.
마크업과 CSS가 얼마나 단순한지 주목하십시오. 테이블 해킹이나 아무것도 없습니다.
플렉스 모델은 모든 주요 브라우저 와 IE11+에서 지원됩니다.
html, body { height: 100%; } body { display: flex; } .left, .right { flex: 1; } .left { background: orange; } .right { background: cyan; } <div class="left">left</div> <div class="right">right</div>여기 에서 플렉스 모델 에 대해 자세히 알아보세요.
Airen
다음과 같은 몇 가지 중요한 세부 사항을 언급하지 않습니다.
- 레이아웃이 고정 너비입니까?
- 열 중 하나 또는 모두 너비가 고정되어 있습니까?
다음은 한 가지 가능성입니다.
body, div { margin: 0; border: 0 none; padding: 0; } html, body, #wrapper, #left, #right { height: 100%; min-height: 100%; } #wrapper { margin: 0 auto; overflow: hidden; width: 960px; // width optional } #left { background: yellow; float: left; width: 360px; // width optional but recommended } #right { background: grey; margin-left: 360px; // must agree with previous width } <html> <head> <title>Example</title> </head> <body> <div id="wrapper"> <div id="left"> Left </div> <div id="right"></div> </div> </body> </html>고정해야 하는 컬럼과 액체 컬럼에 따라 다양한 변형이 있습니다. 절대 위치 지정으로도 이 작업을 수행할 수 있지만 일반적으로 부동 소수점을 대신 사용하여 더 나은 결과(특히 크로스 브라우저 측면에서)를 찾았습니다.
cletus
이것이 나를 위해 일한 것입니다.
<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div> position:absolute 대신 position:fixed 를 사용하면 아래로 스크롤하더라도 분할이 화면 끝까지 확장됩니다.
Majda
다음은 높이에 대한 수정 사항입니다.
CSS에서 다음을 사용하십시오.
#your-object: height: 100vh; vh-units 지원하지 않는 브라우저의 경우 modernizr을 사용하십시오.
이 스크립트를 추가합니다( vh-units 대한 감지를 추가하려면).
// https://github.com/Modernizr/Modernizr/issues/572 // Similar to http://jsfiddle.net/FWeinb/etnYC/ Modernizr.addTest('cssvhunit', function() { var bool; Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) { var height = parseInt(window.innerHeight/2,10), compStyle = parseInt((window.getComputedStyle ? getComputedStyle(elem, null) : elem.currentStyle)["height"],10); bool= !!(compStyle == height); }); return bool; }); 마지막으로 이 함수를 사용 vh-units 지원하지 않는 경우 #your-object 에 추가합니다.
$(function() { if (!Modernizr.cssvhunit) { var windowH = $(window).height(); $('#your-object').css({'height':($(window).height())+'px'}); } });Jonas Sandstedt
여기에 모든 답변이 있음에도 불구하고 아무도 문제를 실제로 해결하지 못했다는 사실에 놀랐습니다. 100vh height / min-height 사용하면 내용이 페이지보다 길 때 레이아웃이 깨졌습니다. 100% height / min-height 를 사용하면 콘텐츠가 페이지 높이보다 작을 때 레이아웃이 깨졌습니다.
두 경우를 모두 해결한 내가 찾은 솔루션은 상위 두 가지 답변을 결합하는 것이었습니다.
html, body, #mydiv { height: 100%; min-height: 100vh; }machineghost
100% 는 너비와 높이가 다르게 작동합니다.
width: 100% 를 지정하면 "부모 요소 또는 창의 너비에서 사용 가능한 너비의 100%를 차지합니다."를 의미합니다.
height: 100% 를 지정하면 "상위 요소에서 사용 가능한 높이의 100%를 차지합니다"만 의미합니다. 즉, 최상위 요소에서 높이를 지정하지 않으면 모든 자식의 높이는 0 또는 부모의 높이가 되므로 최상위 요소를 min-height 창 높이.
나는 항상 최소 높이가 100vh가 되도록 본체를 지정하여 위치 지정 및 계산을 쉽게 하고,
body { min-height: 100vh; }Dinesh Pandiyan
이것을 시도하십시오 - 테스트:
body { min-height: 100%; } #right, #left { height: 100%; }편집: 2020년 업데이트:
vh 를 사용할 수 있습니다.
#right, #left { height: 100vh }lukaszkups
100vw = 뷰포트 너비의 100%입니다.
100vh = 뷰포트 높이의 100%입니다.
div 너비 또는 높이를 브라우저 창 크기의 100%로 설정하려면 다음을 사용해야 합니다.
너비: 100vw
높이: 100vh
또는 더 작은 크기로 설정하려면 CSS calc 기능을 사용하십시오. 예시:
#example { width: calc(100vw - 32px) }Руслан
min-height: 100% 추가하고 높이를 지정하지 마십시오(또는 자동으로 설정). 그것은 나를 위해 완전히 일했습니다.
.container{ margin: auto; background-color: #909090; width: 60%; padding: none; min-height: 100%; }Remus Simion
가장 간단한 방법은 이렇게 하는 것입니다.
div { background: red; height: 100vh; } body { margin: 0px; } <div></div>EMILO
전체 페이지를 '뷰포트' 라고 하며 CSS3에서 해당 뷰포트에 따라 요소를 디자인할 수 있습니다.
이러한 단위를 뷰포트 백분율 길이라고 하며 초기 포함 블록의 크기에 상대적입니다.
- 뷰포트 높이를
vh라고 합니다. 페이지의 전체 높이는 100vh입니다. - 뷰포트 너비는
vw라고 합니다. 페이지의 전체 높이는 100vw입니다. - vmin(뷰포트 최소 길이) 및 vmax(뷰포트 최대 길이)도 있습니다.
이제 CSS에 다음을 추가하여 문제를 쉽게 해결할 수 있습니다.
.classname-for-right-div /*You could also use an ID*/ { height: 100vh; }다음은 뷰포트 기준 길이에 대한 정보입니다.
WebDevLearner
<div> 의 높이를 100%로 설정하는 데 사용할 수 있는 몇 가지 방법이 있습니다.
방법 (A):
html, body { height: 100%; min-height: 100%; } .div-left { height: 100%; width: 50%; background: green; } .div-right { height: 100%; width: 50%; background: gray; } <div class="div-left"></div> <div class="div-right"></div>vh를 사용하는 방법(B):
html, body { height: 100%; min-height: 100%; } .div-left { height: 100vh; width: 50%; background: green; float: left; } .div-right { height: 100vh; width: 50%; background: gray; float: right; } <div class="div-left"></div> <div class="div-right"></div>플렉스 박스를 사용하는 방법 (c):
html, body { height: 100%; min-height: 100%; } .wrapper { height: 100%; min-height: 100%; display: flex; } .div-left { width: 50%; background: green; } .div-right { width: 50%; background: gray; } <div class="wrapper"> <div class="div-left"></div> <div class="div-right"></div> </div>Santosh Khalse
이것은 나를 위해 일했습니다.
html, body { height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */ } #wrapper { min-height: 100%; /* Minimum height for a modern browser */ height:auto !important; /* Important rule for a modern browser */ height:100%; /* Minimum height for Internet Explorer */ overflow: hidden !important; /* Firefox scroll-bar */ }이 페이지 에서 가져왔습니다.
testing
height:100% in html & body 설정 시도
html, body { height: 100%; } 그리고 2div 높이를 동일하게 사용하려면 상위 요소 display:flex 속성을 설정하거나 설정합니다.
Mohammed Javed
블록 요소는 기본적으로 상위 요소의 전체 너비를 사용합니다.
이것이 수직으로 쌓는 설계 요구 사항을 충족하는 방법입니다.
블록 서식 컨텍스트에서 상자는 포함하는 블록의 맨 위에서 시작하여 세로로 차례로 배치됩니다.
그러나 이 동작은 높이까지 확장되지 않습니다.
기본적으로 대부분의 요소는 콘텐츠의 높이( height: auto )입니다.
너비와 달리 추가 공간을 원할 경우 높이를 지정해야 합니다.
따라서 다음 두 가지를 염두에 두십시오.
- 전체 너비를 원하지 않는 한 블록 요소의 너비를 정의해야 합니다.
- 콘텐츠 높이를 원하지 않는 한 요소의 높이를 정의해야 합니다.
.Contact { display: flex; /* full width by default */ min-height: 100vh; /* use full height of viewport, at a minimum */ } .left { flex: 0 0 60%; background-color: tomato; } .right { flex: 1; background-color: pink; } body { margin: 0; } /* remove default margins */ <div class="Contact"> <section class="left"> <div class=""> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1> </div> </section> <section class="right"> <img /> </section> </div>Michael Benjamin
뷰포트 높이를 의미하는 "px" 대신 "vh" 단위를 사용하십시오.
height: 100vh;khalifeh
다음은 이전 답변과 정확히 일치하지 않지만 일부 사람들에게 도움이 될 수 있는 내용입니다.
body { display: flex; flex-direction: column; height: 100vh; margin: 0px; } #one { background-color: red; } #two { margin-top: 0px; background-color: black; color: white; overflow-y: scroll; }newdark-it
옵션 중 하나는 CSS 테이블을 사용하는 것입니다. 훌륭한 브라우저 지원을 제공하며 Internet Explorer 8에서도 작동합니다.
html, body { height: 100%; margin: 0; } .container { display: table; width: 100%; height: 100%; } .left, .right { display: table-cell; width: 50%; } .right { background: grey; } <div class="container"> <div class="left"></div> <div class="right"></div> </div>Stickers
이것을 한 번 시도하십시오 ...
*{ padding:0; margin:0; } .parent_div{ overflow:hidden; clear:both; color:#fff; text-align:center; } .left_div { float: left; height: 100vh; width: 50%; background-color: blue; } .right_div { float: right; height: 100vh; width: 50%; background-color: green; } <div class=" parent_div"> <div class="left_div">Left</div> <div class="right_div">Right</div> </div>Sunil R.
Flexbox는 이러한 유형의 문제에 가장 적합합니다. 콘텐츠를 수평 방향으로 배치하는 것으로 대부분 알려져 있지만 Flexbox는 실제로 수직 레이아웃 문제에도 잘 작동합니다. 수직 섹션을 플렉스 컨테이너로 감싸고 확장할 섹션을 선택하기만 하면 됩니다. 컨테이너에서 사용 가능한 모든 공간을 자동으로 차지합니다.
robross0606
실제로 저에게 가장 잘 맞는 것은 vh 속성을 사용하는 것이었습니다.
내 React 애플리케이션에서 크기가 조정된 경우에도 div가 페이지 높이와 일치하기를 원했습니다. 나는 높이를 시도했다 height: 100%; , overflow-y: auto; , 그러나 height:(your percent)vh; 의도한 대로 작동했습니다.
참고: 패딩, 둥근 모서리 등을 사용하는 경우 vh 속성 백분율에서 해당 값을 빼거나 높이가 추가되고 스크롤 막대가 나타나도록 합니다. 내 샘플은 다음과 같습니다.
.frame { background-color: rgb(33, 2, 211); height: 96vh; padding: 1% 3% 2% 3%; border: 1px solid rgb(212, 248, 203); border-radius: 10px; display: grid; grid-gap: 5px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr); }JimmyFlash
display: flex 및 height: 100vh 사용할 수 있습니다.
html, body { height: 100%; margin: 0px; } body { display: flex; } .left, .right { flex: 1; } .left { background: orange; } .right { background: cyan; } <div class="left">left</div> <div class="right">right</div>Thuc Nguyen
두 가지 작업을 수행해야 합니다. 하나는 이미 수행한 높이를 100%로 설정하는 것입니다. 두 번째는 절대 위치로 설정하는 것입니다. 그것은 트릭을해야합니다.
html, body { height: 100%; min-height: 100%; position: absolute; }Prabhakar Undurthi
다음 CSS를 사용해 보세요.
html { min-height: 100%; margin: 0; padding: 0; } body { height: 100%; } #right { min-height: 100%; }ProblemChild
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 100vh; // Height window (vh) } .wrapper .left{ width: 80%; // Width optional, but recommended } .wrapper .right{ width: 20%; // Width optional, but recommended background-color: #dd1f26; } <!-- vw: hundredths of the viewport width. vh: hundredths of the viewport height. vmin: hundredths of whichever is smaller, the viewport width or height. vmax: hundredths of whichever is larger, the viewport width or height. --> <div class="wrapper"> <div class="left"> Left </div> <div class="right"> Right </div> </div>RamNiwas Sharma
출처 : http:www.stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| .NET에서 십진수, 부동 소수점 및 이중의 차이점은 무엇입니까? (0) | 2021.11.25 |
|---|---|
| 한 번에 여러 예외를 포착하시겠습니까? (0) | 2021.11.25 |
| Python 사전에서 키를 제거하려면 어떻게 해야 합니까? (0) | 2021.11.25 |
| CSS를 사용하여 텍스트 또는 이미지에 투명한 배경을 제공하려면 어떻게 합니까? (0) | 2021.11.25 |
| 파이썬에서 문자열을 어떻게 소문자로 합니까? (0) | 2021.11.25 |