2139

왼쪽 div과 오른쪽 두 개의 열이있는 레이아웃 이 있습니다 div.

오른쪽 div에는 회색 background-color이 있으며 사용자 브라우저 창의 높이에 따라 세로로 확장해야합니다. 바로 지금 그 background-color내용의 마지막 부분에서 끝납니다 div.

나는 시도했다 height:100%, min-height:100%;등

html css height

— 마이크
소스

7

이 질문이 유용

— 하다고 생각하십니까?

좋은 방법이지만 vh, vw 등의 장치는 버그가있는 것으로 알려져 있습니다. 필요한 경우이 경량 js 대안이 있습니다 : joaocunha.github.io/vunit

— 더 선명한

다음 height은 백분율 값 을 사용하여 CSS 속성에 대한 간단하고 명확한 설명입니다 . stackoverflow.com/a/31728799/3597276

— Michael Benjamin

4

당신은 높이를 사용할 수 있습니다 : 100vh; css 속성

— Vishnu Chauhan

2833

다음과 같은 몇 가지 CSS 3 측정 단위가 있습니다.

뷰포트 백분율 (또는 뷰포트 상대) 길이

뷰포트 백분율 길이 란 무엇입니까?

위의 링크 된 W3 후보 추천에서 :

뷰포트 백분율 길이는 초기 포함 블록의 크기를 기준으로합니다. 초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.

이러한 단위는 vh(뷰포트 높이), vw(뷰포트 너비), vmin(뷰포트 최소 길이) 및 vmax(뷰포트 최대 길이)입니다.

분할기를 브라우저 높이에 채우는 데 어떻게 사용할 수 있습니까?

이 질문에 우리는 사용할 수 있습니다 vh: 1vh은 뷰포트 높이의 1 %와 같습니다. 즉 100vh, 요소가 DOM 트리의 위치에 상관없이 브라우저 창의 높이와 같습니다.

HTML

<div></div>

CSS

div {
    height: 100vh;
}

이것은 문자 그대로 필요한 전부입니다. 다음은 사용중인 JSFiddle 예제 입니다.

이 새로운 장치를 지원하는 브라우저는 무엇입니까?

이는 현재 Opera Mini를 제외한 모든 최신 주요 브라우저에서 지원됩니다. 추가 지원을 위해 다음을 사용할 수 있습니까?를 확인하십시오 .

여러 열에 어떻게 사용할 수 있습니까?

좌측 및 우측 칸막이 갖춘 당면한 문제의 경우, 여기에서 A는 JSFiddle 예 를 모두 포함하는 두 개의 열 레이아웃 도시 vh와 vw.

어떻게 `100vh`다릅니 `100%`까?

이 레이아웃을 예로 들어 보겠습니다.

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

p태그 여기에 100 % 신장으로 설정하지만, 그 함유되어 있기 때문에 div200 개 픽셀의 100 %가 200 개 화소가되고, 200 픽셀 높이를 가지고 있지 의 100 % body높이. 100vh대신 사용하면 p높이에 body관계없이 태그의 높이가 100 %가됩니다 div. 이것 좀 봐 동반 JSFiddle 쉽게 그 차이를 볼 수 있습니다!

— 제임스 도넬리
소스

35

요소가 실제로 뷰포트보다 큰 경우 스크롤로 이상한 동작을합니다. 컨테이너는 뷰포트 높이를 유지하고 내용물은 컨테이너 밖으로 흐릅니다. min-height:100vh이 문제를 해결하는 것 같습니다.

— wdm

8

@DGDD 이것은 iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 및 IEMobile 10.0에서 작동합니다. 어떤 모바일 브라우저를 참조하는지 모르지만이 4 개는 사용 된 모바일 브라우저의 90 % 이상을 구성합니다. 이 질문은 모바일 브라우저에서 작업하기위한 요구 사항을 지정하지 않습니다.

— 제임스 도넬리

1

@ robross0606 다시 말하지만 그것은 내가 여기서 대답 한 질문이 아닙니다. 그 해답이 실제로 사용 인 flexbox 않는 완전히 다른 질문입니다 : stackoverflow.com/questions/90178/...

— 제임스 도넬리

1

@JamesDonnelly 예, 알고 있습니다. 그러나 그것은이 질문에 대한 답이 아닙니다. 브라우저 창 높이에는 탐색 모음 높이가 포함됩니다. 모바일 브라우저에서는 탐색 표시 줄이 표시되거나 숨길 때마다 뷰포트 높이가 변경되므로 더 좋습니다.

— RedClover

3

모바일 알림 : 탐색 메뉴를 고려하지 않은 Chrome 모바일에서 vh 혼란 사용 그런 다음 페이지 상단을 덮습니다. 당신이 거기에 메뉴가 있다면 심각한 문제 ...

— Offirmo

568

당신이의 높이를 설정하려는 경우 <div>또는 모든 요소를, 당신의 높이를 설정해야 <body>하고 <html>너무에 100 %. 그런 다음 100 %로 요소의 높이를 설정할 수 있습니다 :)

예를 들면 다음과 같습니다.

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

— 아리아나 리안
소스

109

내가 틀렸다면 나를 바로 잡으십시오. 그러나 당신도 실제로 일하기 위해서는 div의 모든 부모에게 높이를 설정해야한다고 생각합니다.

— Dany Y

페이지를 나타내는 블록과 함께 지속적인 디자인 : 페이지 6000 픽셀 높이를 사용하는 경우에는 작동하지 않습니다. 하나의 블록이 정확히 뷰포트의 높이가되기를 원합니다.

— Qwerty

@ 대니, 당신이 맞아요. 화면 높이가 모든 것에 영향을 미치면서 div의 모든 부모에게 높이를 설정해야합니다. 여기 예가 있습니다.

— toto_tico

이 트릭은 어떤 경우에는 효과가 있지만 어떤 경우에는 그렇지 않습니다. 호환성 또는 더 권장되는 방법을 검색하면 위의 @ James 's Answer를 볼 수 있습니다 :) Viewport Percentage Method :) 사용하여도 작동합니다. 건배

— Ariona 리안

8

@ Qwerty, 여기 해결책이 있습니다. 않도록 설정 CSS : html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. 3 개의 섹션이 있다면html { height: 300%; } body { height: 100%; } #div { height: 33.3% }

— cameronjonesweb

283

요소를 절대적으로 배치 할 수 있다면

position: absolute;
top: 0;
bottom: 0;

할 것입니다.

— Tinister
소스

16

이것은 문서 플로우에서 요소를 가져 와서 하위 값을 상위의 높이로 세분화하여 작동합니다. 콘텐츠가 부모의 키를 초과하는 경우에는 적합하지 않습니다.

— Ricky Boyce

1

부모 중 하나가 설정되어 position:relative있고 높이가 뷰포트의 100 %가 아닌 경우에는 작동하지 않습니다 . 다음 상대 또는 절대 조상으로 상단과 하단을 조정합니다.

— Seika85

141

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

@Lamar이 문제가 * { box-sizing: border-box; }발생하지 않도록 사용해야 합니다.

— Luca Steeb

2

뷰포트 단위에 브라우저 지원에 대한 가치 검사 caniuse는 : caniuse.com/#feat=viewport-units

— 데이브 Everitt에게

133

vh이 경우 뷰포트 높이 의 1 %를 기준으로 사용할 수 있습니다 .

즉, 높이를 가리려면 간단히 사용하십시오 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>

스 니펫 확장

— 알리레자
소스

100vh를주는 것은 페이지에 수직 스크롤을 추가했기 때문에이 것을 따르지만 작동하지 않았습니다. stackoverflow.com/questions/44645465/... . 세로 스크롤을 피하고 div가 내용없이 아래쪽에 닿을 수있는 방법이 있습니까?

— DILEEP THOMAS

@DILEEPTHOMAS 기존 검색paddings/margins

— Legends

내가 *로 제공 시도 루트 파일 {0, 패딩 : 마진 0}에서 @Legends 그러나 didnt 한 일했다

— 의 어플리케이션 개발자 토마스에게

1

@DILEEPTHOMAS는 Alireza가 제공 한이 예제를 살펴보고 본문 요소에 여백이 있기 때문에 스크롤 막대도 있습니다. 여백을 제거하면 스크롤 막대가 사라집니다. 원인이 다를 수 있지만 먼저 확인해야합니다.

— 레전드

102

플렉스 모델 솔루션 vh과 비교할 때 최상위 투표 솔루션을 포함한 다른 모든 솔루션 은 차선책 입니다.

CSS flex 모델 이 등장하면서 100 % 높이의 문제를 해결하는 것이 매우 쉬워 졌습니다 : height: 100%; display: flex부모와 flex: 1자식 요소에서 사용하십시오. 컨테이너에서 사용 가능한 모든 공간을 자동으로 차지합니다.

마크 업과 CSS가 얼마나 간단한 지 참고하십시오. 테이블 해킹이나 아무것도 없습니다.

flex 모델은 모든 주요 브라우저 와 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
소스

3

경고 단어 : 왼쪽 / 오른쪽 컨테이너 중 하나의 내용이 원래 본체 높이를 초과하면 반대쪽 컨테이너의 크기가 조정되지 않으므로 컨테이너의 높이가 달라집니다.

— schellmax

1

문제의 예 Schellmax는 지적 : jsfiddle.net/Arete/b4g0o3pq

— 레테에게

디자인에 따라 overflow-y: auto;"컨테이너가 원래 본체 높이를 초과 함"을 피할 수 있습니다.

— Evi Song

54

다음과 같은 몇 가지 중요한 세부 사항은 언급하지 않았습니다.

레이아웃의 너비가 고정되어 있습니까?
열 중 하나 또는 둘 다 고정 너비입니까?

한 가지 가능성이 있습니다.

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>

스 니펫 확장

고정해야하는 컬럼과 액체 인 컬럼에 따라 여기에는 많은 변형이 있습니다. 절대 위치 지정 으로도이 작업을 수행 할 수 있지만 일반적으로 플로트를 사용하여 더 나은 결과 (특히 크로스 브라우저 측면에서)를 발견했습니다.

— 클레 투스
소스

34

이것이 나를 위해 일한 것입니다.

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; background: red;"> </div>

스 니펫 확장

아래로 스크롤하더라도 분할이 화면 끝으로 확장 되더라도, position:fixed대신 사용하십시오 position:absolute.

— 마이 다
소스

"position : [fixed | absolute]"가있는이 코드는 팝업의 배경에는 좋지만 (사진을 확대 / 축소하려면 클릭) 실제로 아래로 스크롤해야하는 경우에는 확실하지 않습니다. 여전히 유용한 반죽!

— Mannyfatboy

29

높이에 대한 수정 사항이 있습니다.

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;
});

#your-object브라우저가 지원하지 않는 경우 마지막으로이 함수를 사용하여 뷰포트의 높이를 추가하십시오 vh-units.

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

— 조나스 샌드 스테 트
소스

23

100% 너비와 높이에 대해 다르게 작동합니다.

을 지정하면 width: 100%"부모 요소 또는 창 너비에서 사용 가능한 너비의 100 %를 차지합니다"를 의미합니다.

을 지정하면 height: 100%"부모 요소에서 사용 가능한 높이의 100 %를 차지합니다"만 의미합니다. 즉, 최상위 요소에 높이를 지정하지 않으면 모든 자식의 0높이가 부모의 키이거나 높이가되므로 최상위 요소를 min-height창 높이 로 설정해야합니다 .

나는 항상 몸을 최소 높이 100vh로 지정하고 위치와 계산을 쉽게 만듭니다.

body {
  min-height: 100vh;
}

— 디 네시 판 디얀
소스

16

min-height: 100%높이를 추가 하거나 지정하지 마십시오 (또는 자동으로 설정). 그것은 나를 위해 완전히 일을했습니다.

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

— 레무스 시미 온
소스

16

100vw === 뷰포트 너비의 100 %.

100vh === 뷰포트 높이의 100 %.

div브라우저 창 크기 의 너비 또는 높이를 100 % 로 설정하려면 다음을 사용해야합니다.

너비의 경우 : 100vw

높이 : 100vh

또는 더 작은 크기로 설정하려면 CSS calc기능을 사용하십시오 . 예:

#example {
    width: calc(100vw - 32px)
}

— Руслан
소스

12

높이 <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>

스 니펫 확장

— 산토스 칼세
소스

12

이것은 나를 위해 일했다 :

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 */
}

이 페이지 에서 가져 왔습니다 .

— 테스트
소스

12

가장 간단한 방법은 이렇게하는 것입니다.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

스 니펫 확장

— 에밀로
소스

11

설정하는 시도 height:100%에 html&body

html, 
body {
    height: 100%;
}

그리고 2div 높이를 동일하게 사용하거나 부모 요소 display:flex속성을 설정하십시오 .

— 모하메드 자 브드
소스

9

여기에 모든 대답이 있더라도 아무도 실제로 문제를 해결하지 못했다는 사실에 놀랐습니다. 100vh height/를 사용 min-height하면 내용이 페이지보다 길 때 레이아웃이 끊어졌습니다. 대신 100% height/ 를 사용 min-height하면 내용이 페이지 높이보다 작을 때 레이아웃이 끊어졌습니다.

두 경우를 모두 해결 한 해결책은 상위 두 가지 답변을 결합하는 것입니다.

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

— 기계 유령
소스

1

90px 높이의 고정 탐색 메뉴가 있으므로 "100vh"를 "calc (100vh-90px)"로 변경해야합니다

— Mark Jackson

8

뷰포트 높이를 의미하는 "px"대신 "vh"단위를 사용하십시오.

height: 100vh;

— 카 라이프
소스

7

블록 요소는 기본적으로 부모의 전체 너비를 사용합니다.

이것이 수직으로 쌓이는 디자인 요구 사항을 충족시키는 방법입니다.

9.4.1 블록 서식 컨텍스트

블록 형식화 컨텍스트에서 상자는 포함하는 블록의 맨 위에서 시작하여 차례로 수직으로 배치됩니다.

그러나이 동작은 높이까지 확장되지 않습니다.

기본적으로 대부분의 요소는 내용의 높이입니다 (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>

스 니펫 확장

— 마이클 벤자민
소스

7

다음은 이전 답변과 정확히 같지 않지만 일부에게는 도움이 될 수 있습니다.

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;
}

https://jsfiddle.net/newdark/qyxkk558/10/

— newdark-it
소스

6

FlexBox CSS 사용

Flexbox는 이러한 유형의 문제에 완벽하게 적합합니다. Flexbox는 내용을 가로 방향으로 배치하는 것으로 주로 알려져 있지만 실제로는 세로 레이아웃 문제에 대해서도 잘 작동합니다. 플렉스 컨테이너에 세로 섹션을 싸서 확장 할 섹션을 선택하기 만하면됩니다. 컨테이너에서 사용 가능한 모든 공간을 자동으로 차지합니다.

— robross0606
소스

6

옵션 중 하나는 CSS 테이블을 사용하는 것입니다. 브라우저 지원 기능이 뛰어나며 Internet Explorer 8에서도 작동합니다.

JSFiddle 예제

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>

스 니펫 확장

— 스티커
소스

6

이것을 시도-테스트 :

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

편집 : 2020 업데이트 :

vh지금 사용할 수 있습니다 :

#right, #left {
  height: 100vh
}

— 루카 슈 쿠프
소스

5

당신이 사용할 수있는 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>

스 니펫 확장

— Nguyen 응 우옌
소스

이 답변이 26 일 전에 게시 된 정확한 구현을 포함하여 이미 게시 된 여러 flexbox 솔루션이 있습니다.

— TylerH

5

두 가지를 수행해야합니다. 하나는 이미 수행 한 높이를 100 %로 설정하는 것입니다. 두 번째는 위치를 절대로 설정합니다. 그 트릭을해야합니다.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

출처

— 프라 바 카르 운 두르 티
소스

3

오래된 솔루션. vh대신 사용하십시오 .

— avalanche1

1

vh모바일 장치에서 반응 형 디자인을 사용하려는 경우 사용하지 마십시오 .

— Alexander Kim

5

다음 CSS를 시도하십시오.

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

— 문제아
소스

5

실제로 저에게 가장 효과적인 것은이 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);
}

— 지미 플래시
소스

그건 그렇고, 요소의 높이에 영향을 미치는 '둥근 모서리'를 언급하면 설정 box-sizing: border-box;을 극복 할 것으로 예상됩니다. 요소 의 크기 (너비 및 높이)를 계산할 때 테두리 크기도 고려됩니다.

— Neek

5

한 번 시도해보십시오 ...

*{
  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>

스 니펫 확장

— 수닐 라지 푸트
소스

3

position: absolute;jQuery 를 사용 하면

$("#mydiv").css("height", $(document).height() + "px");

— 존 스미스
소스

1

JavaScript가 필요하지 않습니다. 현대적인 해결책은 CSS flex box 모델 을 사용하는 것 입니다.

— Dan Dascalescu

JS를 사용하는 경우 이것이 매우 유용하다는 것을 알았습니다. 참고 : F5 또는 CTRL + F5를 사용하면 다른 결과가 반환되므로 $ (window) .load ()와 함께 사용하는 것이 가장 좋습니다. 자세한 내용은이 링크를 확인하십시오. stackoverflow.com/questions/13314058/…

— 에드워드

2

HTML

   // 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>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

— 람 니와 스 샤르마
소스

1

: 가능한 오자 widht(끝 부분)

— 피터 모텐슨

브라우저 창의 높이 100 % 높이를 만드는 방법

뷰포트 백분율 (또는 뷰포트 상대) 길이

뷰포트 백분율 길이 란 무엇입니까?

분할기를 브라우저 높이에 채우는 데 어떻게 사용할 수 있습니까?

HTML

CSS

이 새로운 장치를 지원하는 브라우저는 무엇입니까?

여러 열에 어떻게 사용할 수 있습니까?

어떻게 100vh다릅니 100%까?

HTML

CSS

어떻게 `100vh`다릅니 `100%`까?