[html] div (높이)가 부모 나머지 높이를 차지하도록합니다.

#down남은 공간을 채우기 위해 자식을 확장하는 #container것은 달성하려는 브라우저 지원 및 #up정의 된 높이가 있는지 여부에 따라 다양한 방법으로 수행 될 수 있습니다 .

샘플

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

그리드

CSS의 grid레이아웃은 또 다른 옵션을 제공하지만 Flexbox 모델만큼 간단하지는 않습니다. 그러나 컨테이너 요소의 스타일링 만 필요합니다.

.container { display: grid; grid-template-rows: 100px }

은 grid-template-rows고정 된 높이 100 픽셀과 같은 첫 번째 행을 정의하고,이 열이 자동으로 나머지 공간을 채우기 위해 기지개 남아있다.

IE11에는 -ms-접두사 가 필요 하므로 지원하려는 브라우저에서 기능의 유효성을 검사해야합니다.

Flexbox

CSS3의 Flexible Box Layout Module ( flexbox) 은 이제 잘 지원되며 구현하기가 매우 쉽습니다. 유연하기 때문에 #up높이가 정의되지 않은 경우에도 작동합니다 .

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

일부 flexbox 속성에 대한 IE10 및 IE11 지원은 버그가있을 수 있으며 IE9 이하에서는 전혀 지원하지 않는다는 점에 유의해야합니다.

계산 된 높이

또 다른 쉬운 해결책은 Alvaro가 그의 대답에서 지적했듯이 CSS3calc 기능 단위 를 사용하는 것이지만 첫 번째 자식의 키가 알려진 값이어야합니다.

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

매우 광범위하게 지원되며 유일한 예외는 IE8 또는 Safari 5 (지원 안 함) 및 IE9 (부분 지원)입니다. 다른 문제로는 transform 또는 box-shadow 와 함께 calc 사용이 포함 되므로 우려되는 경우 여러 브라우저에서 테스트해야합니다.

기타 대안

이전의 지원이 필요한 경우, 당신은 추가 할 수 있습니다 height:100%;에 #down하나주의해야 할 점으로, 분홍색 사업부 전체 높이를 만들 것입니다. 컨테이너를 #up아래로 밀기 때문에 컨테이너가 넘칠 것 입니다.

따라서 overflow: hidden;컨테이너에 추가 하여 문제를 해결할 수 있습니다.

또는의 높이 #up가 고정되어있는 경우 컨테이너 내에 절대 위치를 지정하고 #down.

그리고 또 다른 옵션은 테이블 디스플레이를 사용하는 것입니다.

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

답변

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}​

#container {
    width: 300px; height: 300px;
}

#up {
    float: left;
    width: 100%;
}

#down {
    height:100%;
}​