CSS를 사용하여 남은 수직 공간을 채우려면 display:flex를 사용하세요.
<p>3행 레이아웃의 경우: </p>
-
<li>맨 위 행은 내용에 따라 크기가 조정되어야 합니다</li>
<li>맨 아래 행의 높이는 픽셀 단위로 고정되어 있어야 합니다.</li>
<li>가운데 행은 컨테이너를 채울 수 있도록 확장되어야 합니다</li>
</ul>
<p>문제는 기본 콘텐츠가 확장되면서 머리글과 바닥글 줄이 꽉 눌린다는 것입니다. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">섹션 {
디스플레이: 플렉스;
플렉스 흐름: 열;
항목 정렬: 늘이기;
높이: 300px;
}
머리글 {
플렉스: 0 1 자동;
배경: 토마토;
}
div {
플렉스: 1 1 자동;
배경: 금;
오버플로: 자동;
}
바닥글 {
플렉스: 0 1 60px;
배경: 밝은 녹색;
/* 바닥글 수정: min-height: 60px */
}</pre>
<pre class="brush:html;toolbar:false;"><섹션>
<헤더>
헤더: 내용에 맞게 크기 조정
<br>(그런데 정말 그럴까요?)
</헤더>
<div>
주요 내용: 남은 공간 채우기<br>
x
x
x
x
x
x
x
x
x
x
<!-- 주석 처리를 해제하면 깨지는 것을 볼 수 있습니다. - -> x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
<!-- --> </div> <바닥글> 바닥글: 고정 높이(px) </바닥글> <p><br /></p> <p><strong>바이올린:</strong></p>
-
<li>http://jsfiddle.net/7yLFL/1/(실행 중, 콘텐츠 적음)</li>
<li>http://jsfiddle.net/7yLFL/(깨진 대용량 콘텐츠)</li>
</ul>
<p>오래된 브라우저와 상관없이 최신의 뛰어난 CSS를 사용할 수 있는 행운을 얻었습니다. 나는 flex 레이아웃을 사용하여 마침내 오래된 테이블 기반 레이아웃을 제거할 수 있다고 생각합니다. 어떤 이유에서인지 원하는 대로 되지 않습니다...</p>
<p>기록에 따르면 SO에 "남은 높이 채우기"에 관한 관련 질문이 많이 있지만 그 중 어느 것도 flex와 관련된 문제를 해결하지 못합니다. 참조:</p>
-
<li>div의 높이가 나머지 화면 공간을 채우도록 합니다</li>
<li>나머지 세로 공간 채우기 - CSS만</li>
<li>다른 div와 컨테이너를 공유할 때 div가 컨테이너의 나머지 높이/너비를 채우나요? </li>
<li>중첩된 div를 나머지 컨테이너 div 높이의 100%까지 늘립니다.</li>
<li>Flexbox 레이아웃이 수직 공간을 100% 차지하도록 만드는 방법은 무엇입니까? </li>
<li>잠깐만</li>
</ul><p><br /></p>
