CSS를 사용하여 남은 수직 공간을 채우려면 display:flex를 사용하세요.

Question

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

Answer 1

아래 예에는 확장된 중앙 구성 요소의 콘텐츠가 해당 경계를 초과할 때의 스크롤 동작이 포함되어 있습니다. 또한 중앙 구성요소는 뷰포트에 남아 있는 공간의 100%를 차지합니다.

jsfiddle은 여기

으아아아

이 동작을 보여주기 위해 사용할 수 있는 HTML 예제

으아아아

Answer 2

간단하게 만들기:DEMO

으아아아 으아아아