[html] div가 나머지 화면 공간의 높이를 채우도록하십시오.

Html / 글쓴이

콘텐츠가 전체 화면의 높이를 채우려는 웹 응용 프로그램에서 작업하고 있습니다.

이 페이지에는 로고와 계정 정보가 포함 된 헤더가 있습니다. 이것은 임의의 높이가 될 수 있습니다. 콘텐츠 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>

스 니펫 확장

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

content div 내부의 모든 항목에 대해 설정 top: 0;하면 헤더 바로 아래에 배치됩니다. 때로는 내용이 높이가 100 %로 설정된 실제 테이블이됩니다. header안에 넣으면 content작동하지 않습니다.

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

최신 정보:

내용 내부의 요소 div는 높이를 백분율로 설정합니다. 내부의 100 %에 해당 div하는 것이 바닥에 채워집니다. 50 %의 두 가지 요소도 마찬가지입니다.

업데이트 2 :

예를 들어, 머리글이 화면 높이의 20 %를 차지하는 경우 내부에서 50 %로 지정된 테이블 #content은 화면 공간의 40 %를 차지합니다. 지금까지 전체를 테이블에 래핑하는 것이 작동하는 유일한 방법입니다.

답변

2015 년 업데이트 : flexbox 접근 방식

flexbox를 간단히 언급하는 두 가지 다른 답변이 있습니다 . 그러나 그것은 2 년 전에 이루어졌으며 어떠한 사례도 제시하지 않았습니다. flexbox의 사양은 이제 확실하게 해결되었습니다.

참고 : CSS Flexible Boxes Layout 사양은 후보 권장 사항 단계에 있지만 모든 브라우저에서이를 구현하지는 않았습니다. 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 항목의 유연성을 설정합니다. 모질라는 유연한 박스 모델에 대해 잘 소개하고있다 .

답변

CSS에서이를 수행하는 건전한 브라우저 간 방법은 없습니다. 레이아웃에 복잡성이 있다고 가정하면 JavaScript를 사용하여 요소의 높이를 설정해야합니다. 당신이해야 할 일의 본질은 다음과 같습니다.

Element Height = Viewport height - element.offset.top - desired bottom margin

이 값을 가져 와서 요소의 높이를 설정할 수 있으면 크기 조정 기능을 실행할 수 있도록 이벤트 핸들러를 창 onload와 onresize 모두에 첨부해야합니다.

또한 컨텐츠가 뷰포트보다 클 수 있다고 가정하면 overflow-y를 설정하여 스크롤해야합니다.

답변

원래 게시물은 3 년이 넘었습니다. 저처럼이 게시물에 오는 많은 사람들이 앱과 같은 레이아웃 솔루션을 찾고 있다고 생각합니다. 어떻게 고정 된 머리글, 바닥 글 및 나머지 높이를 차지하는 전체 높이 콘텐츠를 말합니다. 그렇다면이 게시물이 도움이 될 수 있습니다 .IE7 + 등에서 작동합니다.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

다음은 해당 게시물의 일부 스 니펫입니다.

@media screen {

  /* start of screen rules. */

  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }

  /* end of screen rules. */
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

스 니펫 확장

답변

마크 업에서 테이블을 사용하는 대신 CSS 테이블을 사용할 수 있습니다.

마크 업

<body>
    <div>hello </div>
    <div>there</div>
</body>

(관련) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;
}

FIDDLE1 및 FIDDLE2

이 방법의 장점은 다음과 같습니다.

1) 적은 마크 업

2) 마크 업은 테이블 데이터가 아니기 때문에 테이블보다 의미가 높습니다.

3) 브라우저 지원이 매우 우수합니다 : IE8 +, 모든 최신 브라우저 및 모바일 장치 ( 캐니 우스 )

완전성을 위해 CSS 테이블 모델의 CSS 속성에 해당하는 Html 요소는 다음과 같습니다.

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

답변

CSS 전용 접근법 (높이를 알고 있거나 고정한 경우)

중간 요소를 전체 페이지에 세로로 확장하려면 calc()CSS3에 도입 된을 사용할 수 있습니다 .

고정 높이 header 와 footer요소 가 있다고 가정 하고 section태그가 사용 가능한 전체 수직 높이를 취하기를 원합니다 …

데모

가정 된 마크 업과 CSS는

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

스 니펫 확장

그래서 여기서하는 일은 요소의 높이를 더하고 함수 100%사용 에서 공제 하는 calc()것입니다.

height: 100%;부모 요소에 사용해야 합니다.

답변

익숙한:
height: calc(100vh - 110px);

암호: 


.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div>
<div class="body">
    <p>The body</p>
</div>
<div class="footer">
    My footer
</div>

스 니펫 확장

답변

flexbox를 사용하는 간단한 솔루션 :

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>

스 니펫 확장

코드 펜 샘플

콘텐츠 div 내에 div가있는 대체 솔루션