div
두 아이 가있는 용기 가 있습니다. 첫 번째 아이는 주어진 키를 가지고 있습니다. 두 번째 아이가 div
특정 높이를주지 않고 컨테이너의 “여유 공간”을 차지하게하려면 어떻게 해야합니까?
이 예에서 분홍색 div
은 공백도 차지해야합니다.
이 질문과 비슷합니다. div가 나머지 높이를 차지하도록 만드는 방법은 무엇입니까?
하지만 절대 위치 를주고 싶지 않습니다 .
답변
#down
남은 공간을 채우기 위해 자식을 확장하는 #container
것은 달성하려는 브라우저 지원 및 #up
정의 된 높이가 있는지 여부에 따라 다양한 방법으로 수행 될 수 있습니다 .
샘플
그리드
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/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은 꽤 명확하게 묘사합니다.
답변
콘텐츠를 아래로 밀기 위해 부동을 사용할 수 있습니다.
고정 크기 컨테이너가 있습니다.
#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
에 요소 안에 스크롤을 가능하게 할 수 있습니다.