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

1910

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

이 페이지에는 로고와 계정 정보가 포함 된 헤더가 있습니다. 이것은 임의의 높이가 될 수 있습니다. 콘텐츠 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 %를 차지합니다. 지금까지 전체를 테이블에 래핑하는 것이 작동하는 유일한 방법입니다.

html css html-table

— 빈센트 맥냅
소스

31

미래에 여기에서 걸림돌이되는 사람이라면 테이블 마크 업 없이도 대부분의 브라우저에서 원하는 테이블 레이아웃을 얻을 수 display:table있고 관련 속성 을 사용하여 비슷한 질문에 대한 답변 을 볼 수 있습니다.

— AmeliaBR

3

- 난 당신의 설정 recereate하려고했습니다 jsfiddle.net/ceELs을 -하지만이 작동하지, 무엇을 내가 놓친 무엇입니까?

— Gill Bates

5

@씨. 외계인의 대답은 간단하고 유용합니다. http://stackoverflow.com/a/23323175/188784

— Gohan

4

실제로 설명하는 내용은 테이블에서도 작동하지 않습니다. 내용이 화면 높이보다 더 많은 수직 공간을 차지하면 테이블 셀과 전체 테이블이 화면 하단을 넘어 확장됩니다. 콘텐츠의 오버플로 : 자동은 스크롤 막대를 표시하지 않습니다.

— Damien

이 후 작동 @GillBates 것은에서 부모 요소 모양의 높이를 지정 jsfiddle.net/ceELs/5

— 마이클 Vašut에게

1112

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 항목의 유연성을 설정합니다. 모질라는 유연한 박스 모델에 대해 잘 소개하고있다 .

— 페블
소스

9

모든 div에서 flex: 0 1 30px;속성 box .row이 재정의되는 이유는 무엇 입니까?

— Erdal G.

11

여기 인 flexbox에 대한 브라우저 지원입니다 - 좋은 모든 녹색 볼 - caniuse.com/#feat=flexbox

— 브라이언 화상

1

Flexie.js로 연결되지 않았습니다. 여기 github 프로젝트 github.com/doctyper/flexie

— ses3ion

52

확실히 그것은 매우 좋은 접근 방법이며 거의 작동합니다.) div.content의 내용이 원래 굽은 높이를 초과하면 작은 문제가 있습니다. 현재 구현에서 "바닥 글"은 더 낮아질 것이며 개발자가 기대하는 것은 아닙니다.) 그래서 나는 매우 쉽게 고쳤습니다. jsfiddle.net/przemcio/xLhLuzf9/3 컨테이너 및 오버플로 스크롤에 additioal flex를 추가했습니다.

— przemcio

12

@przemcio 좋은 점은,하지만 난 스크롤 함량을 갖는 것은 무엇을 모든 개발자 예상하는 생각하지 않습니다) - 만 추가 할 필요가해야 overflow-y: auto할 .row.content당신이 그러나 필요 달성하기 위해.

— Pebbl

226

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

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

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

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

— 니케이
소스

2

그것이 내가 의심 한 것입니다. 그러나 응용 프로그램은 Javascript를 끈 상태에서도 작동하므로 테이블을 계속 사용합니다.

— Vincent McNabb

6

빈센트, 당신의 입장을 고수하는 길. 나는 똑같은 일을하고 싶었고 CSS로는 불가능한 것처럼 보입니까? 확실하지는 않지만 다른 수많은 솔루션 중 어느 것도 당신이 설명한 것을 수행하지 않습니다. 자바 스크립트는이 시점에서 올바르게 작동하는 유일한 것입니다.

— 트래비스

5

창 높이가 변경되는 경우

— Techsin

4

내 말은 ... 왜 2013 년에 calc를 사용하지 않습니까?

— kamii

4

높이 : calc (100vh-400px); 이 게시물의 내용을 정확하게 수행하는 유효한 CSS 스타일입니다. 다른 모든 솔루션은 고정 부모 높이 또는 블록 표시를 사용합니다.

— WilliamX

167

원래 게시물은 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>

스 니펫 확장

— h--n
소스

74

이 문제에는 한 가지 문제가 있습니다. 머리글과 바닥 글은 자동 크기가 아닙니다. 즉 실제 어려움이고, 그 A는 대답은 ... 상단에 현재 "이것이 불가능"왜

— 로마 Starkov

55px 헤더와 나머지 문서 높이를 채우는 div가 필요했습니다. 이것이 해결책입니다!

— Matías Cánepa

당신은 폭탄입니다, 나는 이것을 오랫동안 시도해 왔으며 이것이 내가 찾은 유일한 해결책입니다. 내 탐색 요소는 상단에서 60px 높이가 필요하고 나머지는 100 %에 걸쳐 있어야하므로 해결되었습니다.

— Adam Waite

이것은 약간의 문제가있는 것을 제외하고는 잘 작동합니다. 요소를 display: table몸에 넣으면 몸이 넘칠 것 같습니다. 따라서 height: 100%올바른 높이가 생성되지 않습니다.

— GSTAR

4

.col사용되지 않습니까?

— slartidan

143

마크 업에서 테이블을 사용하는 대신 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 }

— 다니엘 드
소스

3

난 그냥 CSS 테이블의 기술을 지적했다 . 이미이 답변에 이미 답변 된 것으로 나타났습니다. 이다 최선의 해결책; 깨끗하고 우아하며 정확한 도구를 의도 한대로 사용하십시오. CSS 테이블

— Ian Boyd

바이올린 코드는 여기의 답변과 일치하지 않습니다. html, body { height: 100%, width: 100% }테스트에서 추가 가 중요해 보였습니다.

— mlibby

8

CSS 테이블의 성가신 기능은 일반 테이블과 동일합니다. 내용이 너무 크면 셀을 확장하여 맞 춥니 다. 즉, 페이지가 동적 인 경우 여전히 크기 (최대 높이)를 제한하거나 코드에서 높이를 설정해야 할 수도 있습니다. 정말 Silverlight 그리드가 그리워요! :(

— 사라 코딩

3

테이블 행 요소 내에 항상 절대적으로 배치 된 컨테이너를 추가 한 다음 너비와 높이를 100 %로 설정할 수 있습니다. 테이블 행 요소에서 상대 위치를 설정해야합니다.

— Mike Mellor

1

@MikeMellor는 IE11에서 작동하지 않지만 요소의 relative위치 를 무시하는 것처럼 보이기 table-row때문에 테이블 요소가 아닌 첫 번째 위치의 높이를 사용합니다.

— dwelle

95

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%;부모 요소에 사용해야 합니다.

— 미스터 에일리언
소스

13

OP는 헤더가 임의의 높이 일 수 있다고 말했다. 따라서 높이를 미리 모른다면 calc를 사용할 수 없습니다 :(

— Danield

1

@Danield 그것이 내가 고정 높이를 언급 한 이유입니다 :)

— Mr. Alien

3

이것은 나를 위해 일한 솔루션이며 flexbox 주변의 기존 페이지를 다시 디자인하지 않아도됩니다. LESS, 즉 부트 스트랩을 사용 하는 경우 calc () 함수를 이스케이프 처리하는 방법에 대한 코더 월 게시물을 읽고 LESS가 처리하지 않도록하십시오.

— jlyonsmith

1

Op는 '이것은 임의의 높이 일 수있다'고 말했다. 임의의 수단은 디자이너에 의해 결정되어 고정됩니다. 이 솔루션은 지금까지 가장 좋은 솔루션입니다.

— jck

57

익숙한: 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>

스 니펫 확장

— 응 우옌
소스

1

제 생각에는 가장 깨끗한 해결책입니다. 자바 스크립트를 추가하는 것보다 낫습니다. (그러나 답변은 이미 다른 사람에 의해 2015 년에 게시되었습니다)

— bvdb

이것은 훨씬 깨끗하게 느껴집니다.

— 프로그래머

44

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가있는 대체 솔루션

— ok
소스

4

이것이 가장 좋은 대답입니다. hero-img 홈 페이지의 매력처럼 또는 navbar와 함께 영웅 이미지의 콤보처럼 작동

— noobcoderiam

jsfiddle.net/31ng75du/5 Chrome, FF, Edge, Vivaldi로 테스트

— user2360831

이것은 간단하고 최고입니다.

— Dev Anand

38

CSS 에서 vh의미하는 것을 단순히 사용 하는 것은 어떻습니까 ...view height

아래에서 생성 한 코드 스 니펫을 보고 실행하십시오.

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

스 니펫 확장

또한 아래에서 만든 이미지를 살펴보십시오.

— 알리레자
소스

10

div가 창의 전체 높이에 걸쳐 있도록하려는 경우에만 유용합니다. 이제 알 수없는 높이로 헤더 div를 놓습니다.

— LarryBud

@LarryBud 당신이 옳아, 이것은 래퍼 div를 만든다. 그래서 모든 것이이 div 안에 들어가야한다.

— Alireza

34

CSS3 간단한 방법

height: calc(100% - 10px); // 10px is height of your first div...

요즘의 모든 주요 브라우저가이를 지원하므로 빈티지 브라우저를 지원할 필요가없는 경우 계속 진행하십시오.

— dev.meghraj
소스

4

다른 요소의 높이를 모르는 경우 (예 : 가변 수의 자식 요소가 포함 된 경우) 작동하지 않습니다.

— Ege Ersoz

당신은 또한 100vh를 사용할 수 있습니다, 이것을하는 사람 : 빼기와 요소 사이에 공백을 두십시오

— htafoya

28

다음을 CSS사용하여 순수하게 수행 할 수 있습니다 vh.

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

그리고 HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

나는 그것은 모든 주요 브라우저에서 작동을 확인 : Chrome, IE, 및FireFox

— 오르 모즈
소스

2

와우, 들어 본 적이 vh과 vw전에 단위. 추가 정보 : snook.ca/archives/html_and_css/vm-vh-units

— Steve Bennett

불행히도, 이것은 IE8을 지원하지 않습니다 :(

— Scott

2

나는이 접근법을 시도했지만 height: 100%on #content은 높이를 #page무시하고 #tdcontent높이를 모두 무시 했습니다. 내용이 많으면 스크롤 막대가 페이지 아래쪽으로 확장됩니다.

— Brandon

28

내용이 너무 길 때 스크롤하기 위해 하단 div가 필요할 때 게시 된 솔루션이 없습니다. 이 경우 작동하는 솔루션은 다음과 같습니다.

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

스 니펫 확장

원본 소스 : CSS에서 오버플로를 처리하는 동안 컨테이너의 남은 높이 채우기

JSFiddle 실시간 미리보기

— 존 쿨락
소스

감사합니다!!! 나는 표가 아닌 비 flexbox 답변을 모두 시도했지만 이것이 100 % 올바르게 작동하는 유일한 것입니다. 한 가지 질문 : 원래 소스에만을 가지고 있으며 body-content-wrapper이중 래퍼가 없으면 제대로 작동하는 것 같습니다 table-cell. 그렇게하는 데 문제가 있습니까?

— Brandon

1

@BrandonMintern 테이블 셀이 없으면 IE8 및 IE9에서 작동하지 않습니다. (원본 기사의 주석 참조)

— John Kurlak

그러나 IE10에서도 셀이 필요합니다. 불행히도 IE10 이하에서는 .body높이가에 설정된 높이와 동일합니다 .container. 세로 스크롤 막대는 여전히 올바른 위치에 있지만 .container원하는 크기보다 크게 늘어납니다. 전체 화면 .body인 경우 화면 하단이 화면 하단에서 벗어납니다.

— Brandon

감사합니다, @JohnKurlak. 내 상황에서 효과가 있었던 유일한 솔루션입니다 (flexbox 방식은 클라이언트가 사용하는 특정 Chrome 버전의 버그로 인해 차단되었습니다)

— Maksym Demidas

이런 ****! 나는이 답변을 오랫동안 찾고있다! 정말 고맙습니다. Flexbox는 여기서 작동하지 않았지만 실제로 테이블 셀은 작동했습니다. 놀랄 만한.

— aabbccsmith

25

나는 이것에 대한 답을 찾고있다. IE8 이상을 대상으로 할 수있을만큼 운이 좋으면display:table 및 관련 값을 하여 div를 포함한 블록 레벨 요소가있는 테이블의 렌더링 규칙을 얻을 .

더 운이 좋고 사용자가 최상위 브라우저를 사용하는 경우 (예 : 최신 프로젝트처럼 제어하는 컴퓨터의 인트라넷 앱인 경우) CSS3 의 새로운 Flexible Box Layout 을 사용할 수 있습니다 !

— 크리스
소스

22

나를 위해 일한 것은 (다른 div 내에 div가 있고 다른 모든 상황에서 가정) 하단 패딩을 100 %로 설정하는 것입니다. 즉, 이것을 CSS / 스타일 시트에 추가하십시오.

padding-bottom: 100%;

— Tonye-진정한 포도 나무 제작
소스

14

무엇의 100 %? 이것을 시도하면 큰 빈 공간이 생기고 스크롤이 시작됩니다.

— mlibby

뷰포트 크기의 100 %가 @mlibby 일 수 있습니다. html과 body를 100 % 높이로 설정하면 div가 100 %가 될 수 있습니다. 단일 div 만 있으면 100 %는 div 컨텐츠에 상대적입니다. 중첩 된 div로 시도하지 않았습니다.

— Jess

1

요소 높이의 100 % (요소 패딩으로 추가됨)를 의미하므로 높이가 두 배가됩니다. 그것이 페이지를 채울 것이라는 확신은 없으며 질문에 대한 대답은 아닙니다. 실제로 뷰포트보다 더 많이 채워질 수 있습니다.

— Martin

2

패딩-바닥 : 100 % 세트 부모 컨테이너 너비

— Romeno

1

from w3school : 맨 아래 패딩을 요소 너비의 백분율로 지정합니다. w3schools.com/cssref/pr_padding-bottom.asp

— mehdi.loa

21

면책 조항 : 허용되는 대답은 솔루션의 아이디어를 제공하지만 불필요한 래퍼 및 CSS 규칙으로 약간 부풀어 오른 것으로 나타났습니다. 다음은 CSS 규칙이 거의없는 솔루션입니다.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

위의 솔루션은 뷰포트 단위 와 flexbox 를 사용하므로 IE10 +이므로 IE10의 이전 구문을 사용할 수 있습니다.

사용할 코드 펜 : 코드 펜으로 연결

또는이 내용이 넘칠 경우 기본 컨테이너를 스크롤 할 수 있어야하는 경우 : codepen에 링크

— 마이클 P. 바조 스
소스

주요 {높이 : 10px; 플렉스 : 1; 오버플로 : 자동}

— Naeem Baghi

2

시간을 낭비하고 여러 가지 접근 방식을 테스트 한 후이 방법이 최고였습니다! 간결하고 단순하며 똑똑합니다.

— marciowb

19

현재 많은 답변이 있지만 사용 height: 100vh;가능한 전체 수직 공간을 채워야하는 div 요소 작업에 사용했습니다.

이런 식으로, 나는 디스플레이 또는 포지셔닝으로 놀 필요가 없습니다. 이것은 사이드 바와 메인이있는 대시 보드를 만들기 위해 Bootstrap을 사용할 때 유용했습니다. 나는 메인이 전체 수직 공간을 늘리고 채우고 배경 색상을 적용하기를 원했습니다.

div {
    height: 100vh;
}

IE9 이상 지원 : 링크를 보려면 클릭

— 푸우
소스

14

그러나 100vh는 나머지 높이가 아닌 모든 높이처럼 들립니다. 머리글이 있고 나머지를 채우려면 어떻게해야

— 합니까

14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

모든 제정신 브라우저에서, "헤더 (header)"div를 콘텐츠 앞에 형제로 넣을 수 있으며, 동일한 CSS가 작동합니다. 그러나 그 경우 float가 100 %이면 IE7-는 높이를 올바르게 해석하지 않으므로 위와 같이 헤더가 내용에 있어야합니다. 오버플로 : 자동은 IE에서 이중 스크롤 막대를 발생 시키지만 (뷰포트 스크롤 막대는 항상 표시되지만 비활성화되어 있음), 오버플로가 없으면 내용이 오버플로되면 잘립니다.

— 저프
소스

닫기! 다른 것들을 배치한다는 것을 제외하고는 거의 내가 원하는 것, div즉 top: 0;헤더 바로 아래에 무언가를 넣을 것입니다. 완벽하게 답변했지만 여전히 내가 원하는 것이 아니기 때문에 내 질문을 다시 수정하겠습니다. 내용에 맞게 오버플로를 숨길 것입니다.

— Vincent McNabb

-1 :이 답변 사업부라는 내용을 만듭니다 커버 전체 화면이 아닌 나머지 화면

— Casebash

11

나는 이것을 잠시 동안 레슬링하고 다음과 같이 끝냈습니다.

콘텐츠 DIV를 부모와 동일한 높이로 만드는 것은 쉽지만 부모 높이에서 헤더 높이를 뺀 것으로보기는 어렵 기 때문에 콘텐츠 div를 전체 높이로 설정했지만 절대 왼쪽 상단 모서리에 놓고 패딩을 정의하기로 결정했습니다. 헤더 높이가있는 상단의 경우. 이렇게하면 내용이 헤더 아래에 깔끔하게 표시되고 나머지 전체 공간을 채 웁니다.

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

— B_G
소스

15

머리글의 높이를 모르면 어떻게합니까?

— Yugal Jindle

11

구형 브라우저 (즉, MSIE 9 이상)를 지원하지 않는 경우 Flexible Box Layout Module을 사용 하여이 작업을 수행 할 수 있습니다. 이미 W3C CR 인 을 사용 . 이 모듈은 컨텐츠 순서 변경과 같은 다른 멋진 트릭도 허용합니다.

불행히도 MSIE 9 이하는이를 지원하지 않으므로 Firefox 이외의 모든 브라우저에서 CSS 속성에 공급 업체 접두사를 사용해야합니다. 다른 벤더들도 곧 접두사를 삭제하기를 바랍니다.

또 다른 선택은 CSS 그리드 레이아웃입니다. 이지만 안정적인 버전의 브라우저에서 지원이 훨씬 적습니다. 실제로 MSIE 10 만 지원합니다.

2020 년 업데이트 : 모든 최신 브라우저는 display: flex및을 모두 지원합니다 display: grid. 유일하게 누락 된 것은 subgridFirefox에서만 지원되는 지원입니다. MSIE는 사양을 지원하지 않지만 MSIE 특정 CSS 해킹을 추가하려는 경우 동작하도록 만들 수 있습니다. 마이크로 소프트조차도 더 이상 사용해서는 안된다고 말하면서 MSIE를 무시하는 것이 좋습니다.

— 미코 란 탈라 넨
소스

10

CSS 그리드 솔루션

bodywith display:grid및 grid-template-rowsusing auto및 frvalue 속성을 정의하기 만하면 됩니다.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

스 니펫 확장

CSS-Tricks.com에서 그리드에 대한 완벽한 가이드

— Paulie_D
소스

9

왜 이렇게 좋아하지?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

html과 body (순서대로) 높이를 제공 한 다음 요소 높이를 지정 하시겠습니까?

나를 위해 작동

— 타옴
소스

사용자가 큰 화면을 사용하여이 페이지를 검토하고 헤더 높이가 정확히 100px로 고정되어 현재 높이의 40 %보다 작은 경우 헤더와 본문 컨텍스트 사이에 큰 공백이 생깁니다.

— Saorikido

8

실제로 display: table영역을 두 요소 (헤더 및 내용)로 분할 할 수 있습니다. 여기서 머리글의 높이는 다양하고 내용이 나머지 공간을 채 웁니다. 이 전체 페이지와 작품뿐만 아니라,이 지역은 단순히 위치 다른 요소의 내용 인 경우 등 position으로 설정 relative, absolute또는 fixed. 부모 요소의 높이가 0이 아닌 한 작동합니다.

이 바이올린 과 아래 코드를 참조하십시오.

CSS :

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML :

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

— 그렉
소스

2

내가 유감스럽게도 좋은 대답은 불행히도 IE8에서는 작동하지 않으며 앞으로도 오랫동안 지속될 것입니다.

— Vincent McNabb

Gmail과 같은 애플리케이션은 사이징을 위해 Javascript를 사용하는데, 이는 대부분의 경우 CSS보다 나은 솔루션입니다.

— Vincent McNabb

더 좋은 브라우저 브라우저 CSS 솔루션이 없기 때문에 Javascript를 사용하고 있다고 생각합니다.

— Greg

1

@VincentMcNabb는 IE8 w3schools.com/cssref/pr_class_display.asp 에서 작동 합니다. ! DOCTYPE 선언 만 필요합니다. 심지어 디스플레이 속성의 테이블 값에 대해 알지 못했습니다. 멋진 솔루션. +1

— Govind Rai

8

 style="height:100vh"

나를 위해 문제를 해결했습니다. 제 경우에는 이것을 필수 div에 적용했습니다.

— 조 하브 알리
소스

6

빈센트, 새로운 요구 사항을 사용하여 다시 답변하겠습니다. 내용이 너무 길면 숨겨지는 것에 신경 쓰지 않기 때문에 헤더를 띄울 필요가 없습니다. html 및 body 태그에 오버플로를 숨기고 #content높이를 100 %로 설정하십시오 . 내용은 헤더 높이만큼 항상 뷰포트보다 길지만 숨겨져 스크롤 막대가 발생하지 않습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

— 저프
소스

이미 이것을 생각했습니다. 그러나 그것은 작동하지 않습니다. 나는 table그것이 효과 가 있기 때문에 계속 고수 할 것 입니다. 그래도 업데이트 주셔서 감사합니다.

— Vincent McNabb

5

이 시도

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

— 아룬
소스

4

나는 단지 단순한 디자인 문제이기 때문에 매우 간단한 해결책을 찾았습니다. 나머지 페이지가 빨간색 바닥 글 아래에 흰색이되지 않기를 원했습니다. 그래서 페이지 배경색을 빨간색으로 설정했습니다. 그리고 내용은 배경색을 흰색으로합니다. 내용 높이를 예를 들어. 거의 빈 페이지가 20em 또는 50 %이면 전체 페이지가 빨간색으로 유지되지 않습니다.

— htho
소스

4

나는 같은 문제가 있었지만 위의 flexboxes로 솔루션을 만들 수 없었습니다. 그래서 다음을 포함하는 자체 템플릿을 만들었습니다.

고정 된 크기의 요소를 가진 헤더
바닥 글
나머지 높이를 차지하는 스크롤 막대가있는 사이드 바
함유량

flexbox를 사용했지만 속성 표시 만 사용하여 더 간단한 방법으로 flex 및 flex-direction : row | column :

각도를 사용하고 구성 요소 크기가 부모 요소의 100 %가되기를 원합니다.

핵심은 모든 부모의 크기를 제한하기 위해 크기를 백분율로 설정하는 것입니다. 다음 예제에서 myapp 높이는 뷰포트의 100 %입니다.

머리글과 바닥 글이 5 %이므로 주 구성 요소의 뷰포트는 90 %입니다.

https://jsfiddle.net/abreneliere/mrjh6y2e/3에 템플릿을 게시했습니다.

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

HTML :

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

— 안토니 브레 넬리 에르
소스

4

모바일 앱의 경우 VH 및 VW 만 사용합니다.

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

데모-https: //jsfiddle.net/u763ck92/

— grinmax
소스

3

이것은 올바른 해결책이 아닙니다. vh가 모바일 브라우저에서 일치하지 않습니다. 자세한 내용은 여기를 참조하십시오 : stackoverflow.com/questions/37112218/…

— HarshMarshmallow

3

에일리언 씨의 아이디어를 토로 ...

이것은 CSS3 지원 브라우저에서 널리 사용되는 플렉스 박스보다 더 깨끗한 솔루션으로 보입니다.

내용 블록에 calc ()와 함께 높이 대신 높이를 사용하십시오.

calc ()는 100 %로 시작하고 머리글과 바닥 글의 높이를 뺍니다 (패딩 값을 포함해야 함)

"height"대신 "min-height"를 사용하는 것이 특히 유용하므로 Angular2와 같은 JavaScript 렌더링 컨텐츠 및 JS 프레임 워크에서 작동 할 수 있습니다. 그렇지 않으면 자바 스크립트로 렌더링 된 내용이 표시되면 계산에서 바닥 글이 페이지의 맨 아래로 밀리지 않습니다.

다음은 50px 높이와 20px 패딩을 모두 사용하는 머리글과 바닥 글의 간단한 예입니다.

HTML :

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

CSS :

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

물론 수학을 단순화 할 수는 있지만 아이디어는 ...

— 팻 M
소스

3

부트 스트랩에서 :

CSS 스타일 :

html, body {
    height: 100%;
}

1) 나머지 화면 공간의 높이를 채우십시오.

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

2) 나머지 화면 공간의 높이를 채우고 내용을 부모 요소의 가운데에 맞추십시오.

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

— 가 돌프
소스

1

이것은 내 자신의 최소 버전의 Pebbl 솔루션입니다. IE11에서 작동하게하는 트릭을 영원히 찾았습니다. (Chrome, Firefox, Edge 및 Safari에서도 테스트되었습니다.)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>

— 마이클 샤드
소스