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

http://jsfiddle.net/S8g4E/

div두 아이 가있는 용기 가 있습니다. 첫 번째 아이는 주어진 키를 가지고 있습니다. 두 번째 아이가 div특정 높이를주지 않고 컨테이너의 "여유 공간"을 차지하게하려면 어떻게 해야합니까?

이 예에서 분홍색 div은 공백도 차지해야합니다.

이 질문과 비슷합니다. 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;}​

이 질문을 한 지 거의 2 년이 지났습니다. 나는 방금 내가 가진이 문제를 해결하는 css calc ()를 생각해 냈고 누군가가 같은 문제를 가지고 있다면 그것을 추가하는 것이 좋을 것이라고 생각했습니다. (그런데 저는 절대 위치를 사용했습니다).

http://jsfiddle.net/S8g4E/955/

여기 CSS가 있습니다

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

여기에 대한 자세한 정보 : http://css-tricks.com/a-couple-of-use-cases-for-calc/

브라우저 지원 : http://caniuse.com/#feat=calc

내 대답은 CSS 만 사용하며 overflow : hidden 또는 display : table-row를 사용하지 않습니다. 첫 번째 아이가 실제로 주어진 키를 가지고 있어야하지만 귀하의 질문에서 두 번째 아이 만 키가 지정되어 있지 않다고 말하고 있으므로 이것이 수용 가능하다고 생각합니다.

HTML

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

CSS

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

http://jsfiddle.net/S8g4E/288/

데모 확인-http: //jsfiddle.net/S8g4E/6/

CSS 사용-

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

내가 오해하지 않는 한 height: 100%;및 overflow:hidden;에 추가 할 수 있습니다 #down.

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

라이브 데모

편집 :을 사용하지 않기 때문에이 시나리오에 overflow:hidden;사용할 수 있습니다 display: table;. 그러나 IE 8 이전에는 지원되지 않습니다. ( display: table;지원 )

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

라이브 데모

참고 : 당신은 당신이 원하는 말했다 #down높이로 #container높이 마이너스 #up높이입니다. display:table;솔루션은 정확히 않는 및 이 jsfiddle은 꽤 명확하게 묘사합니다.

콘텐츠를 아래로 밀기 위해 부동을 사용할 수 있습니다.

http://jsfiddle.net/S8g4E/5/

고정 크기 컨테이너가 있습니다.

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

콘텐츠는 플로트 옆에 흐를 수 있습니다. float를 전체 너비로 설정하지 않는 한 :

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

동안 #up과 #down상단 위치를 공유 #down의 내용 만 떠 하단 후에 시작할 수 있습니다 #up:

#down {
    height:100%;
}​

요약

완전히 만족스러운 답을 찾지 못해서 직접 찾아야했습니다.

내 요구 사항 :

• 요소는 콘텐츠 크기 가 나머지 공간 크기 보다 작거나 클 때 나머지 공간 을 정확히 차지해야 합니다 (두 번째 경우 스크롤바 가 표시 되어야 함 ).
• 솔루션은 부모 높이가 계산 되고 지정되지 않을 때 작동 합니다 .
• calc()나머지 요소 는 다른 요소 크기에 대해 알 수 없으므로 사용 해서는 안됩니다 .
• flexbox 와 같은 현대 적이고 친숙한 레이아웃 기술을 사용해야합니다.

해결책

• flexboxes로 돌려 계산 높이 (있는 경우) 모든 직접 부모 와 높이가 지정되어 다음 부모 ;
• 계산 된 높이 (있는 경우) 및 요소flex-grow: 1 가있는 모든 직계 부모에 지정 하여 요소 콘텐츠 크기가 더 작을 때 나머지 공간을 모두 차지하도록 지정합니다.
• 요소 콘텐츠 크기가 나머지 공간 크기보다 클 때 더 작아지지 않도록 높이가 고정 된 모든 플렉스 항목에 지정 flex-shrink: 0합니다 .
• 스크롤을 비활성화하고 오버플로 콘텐츠 표시를 금지하려면 계산 된 높이 (있는 경우) 가 있는 모든 직계 부모에 지정 overflow: hidden합니다 .
• 지정 overflow: auto에 요소 안에 스크롤을 가능하게 할 수 있습니다.

JSFiddle (요소에는 계산 된 높이가있는 직접 부모가 있음)

JSFiddle (단순한 경우 : 계산 된 높이가있는 직접 부모 없음)

환상으로 속이는 것이 편하지 않다면 CSS로만 할 수 있을지 모르겠습니다. Josh Mein의 대답을 사용 #container하고 overflow:hidden.

그만한 가치를 위해 다음은 jQuery 솔루션입니다.

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);