div가 나머지 화면 공간의 높이를 채우도록 하는 방법

 

질문 : div가 나머지 화면 공간의 높이를 채우도록합니다.

---

콘텐츠가 전체 화면의 높이를 채우도록하는 웹 애플리케이션에서 작업 중입니다.

페이지에는 로고와 계정 정보가 포함 된 헤더가 있습니다. 임의의 높이가 될 수 있습니다. 콘텐츠 div가 페이지의 나머지 부분을 맨 아래까지 채우길 원합니다.

헤더 div 및 콘텐츠 div 있습니다. 현재 나는 다음과 같은 레이아웃에 테이블을 사용하고 있습니다.

CSS 및 HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

페이지의 전체 높이가 채워지며 스크롤 할 필요가 없습니다.

콘텐츠 div 내부의 경우 top: 0; 헤더 바로 아래에 놓을 것입니다. 때때로 콘텐츠는 높이가 100 %로 설정된 실제 테이블이됩니다. content 안에 header 넣으면 작동하지 않습니다.

table 을 사용하지 않고 동일한 효과를 얻을 수있는 방법이 있습니까?

최신 정보:

div 내부의 요소는 높이도 백분율로 설정됩니다. div 내부의 100 %가 아래쪽에 채워집니다. 50 %의 두 요소도 마찬가지입니다.

업데이트 2 :

예를 들어 헤더가 화면 높이의 20 %를 차지하면 #content 내부에 50 %로 지정된 테이블이 화면 공간의 40 %를 차지합니다. 지금까지 모든 것을 테이블에 포장하는 것이 유일한 방법입니다.

답변

---

flexbox에 대해 간략하게 언급하는 두 가지 다른 답변이 있습니다. 그러나 그것은 2 년 이상 전 일이며 어떠한 예도 제공하지 않습니다. flexbox의 사양은 이제 확실히 정해졌습니다.

참고 : CSS Flexible Boxes 레이아웃 사양은 후보 추천 단계에 있지만 모든 브라우저에서이를 구현 한 것은 아닙니다. WebKit 구현은 -webkit-로 시작해야합니다. Internet Explorer는 -ms-로 시작하는 이전 버전의 사양을 구현합니다. Opera 12.10은 접두사가없는 최신 버전의 사양을 구현합니다. 최신 호환성 상태는 각 속성의 호환성 표를 참조하십시오.

( https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes 에서 가져옴)

모든 주요 브라우저 및 IE11 +는 Flexbox를 지원합니다. IE 10 이하에서는 FlexieJS shim을 사용할 수 있습니다.

현재 지원을 확인하려면 http://caniuse.com/#feat=flexbox를 참조하십시오.

flexbox를 사용하면 고정 차원, 콘텐츠 크기 차원 또는 남은 공간 차원을 가진 행 또는 열간에 쉽게 전환 할 수 있습니다. 내 예에서는 (OPs 질문에 따라) 해당 콘텐츠에 스냅하도록 헤더를 설정했으며 고정 높이 영역을 추가하는 방법을 보여주는 바닥 글을 추가 한 다음 나머지 공간을 채우도록 콘텐츠 영역을 설정했습니다.

 

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

 

위의 CSS에서 flex 속성은 flex-grow , flex-shrink 및 flex-basis 속성을 줄여서 flex 항목의 유연성을 설정합니다. Mozilla는 유연한 상자 모델을 잘 소개합니다 .

출처 : https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space