위와 아래에 알 수없는 높이 div가있는 CSS를 사용하여 div를 나머지 높이로 설정

위와 아래에 알 수없는 높이 div가있는 CSS를 사용하여 div를 나머지 높이로 설정

---

래퍼가 창 높이 (스크롤링 없음)와 가운데 div를 픽셀과 자바 스크립트로 엉망으로 만들지 않고 스크롤 가능하게 만들 수 있습니까?

<div id="wrapper">
  <h1>Header</h1>
  <div id="center">
    <div style="height:1000px">high content</div>
  </div>
  <div id="footer">Footer</div>
</div>

기본적으로 머리글이 상단에 표시되고 바닥 글이 항상 하단에 표시되고 중앙에 남은 높이를 차지하는 스크롤 가능한 콘텐츠가 있기를 원합니다.
머리글, 바닥 글 및 중앙 div의 높이는 모두 알 수 없습니다 (설정된 px 또는 %, 즉 가변 글꼴 크기 또는 패딩 없음). 순수한 CSS로 가능합니까?

---

2014 업데이트 :이 레이아웃 문제를 해결하는 현대적인 방법 은 flexboxCSS 모델 을 사용하는 것 입니다. 모든 주요 브라우저 및 IE11 +에서 지원됩니다.

---

2012 : CSS만으로이 작업을 수행하는 올바른 방법은 display: table및 display: table-row. 이들은되어 모든 주요 브라우저에서 지원 IE8로 시작. 이것은 디스플레이를 위해 테이블을 사용 하지 않습니다 . div를 사용합니다.

html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;  /* just to make sure nothing bleeds */
}
.header {
    display: table-row;
    background: gray;
}
.content {
    display: table-row;  /* height is dynamic, and will expand... */
    height: 100%;        /* ...as content is added (won't scroll) */
    background: turquoise;
}
.footer {
    display: table-row;
    background: lightgray;
}

<div class="wrapper">
    <div class="header">
        <h1>Header</h1>
        <p>Header of variable height</p>
    </div>
    <div class="content">
        <h2>Content that expands in height dynamically to adjust for new content</h2>
        Content height will initially be the remaining
        height in its container (<code>.wrapper</code>).
        <!-- p style="font-size: 4000%">Tall content</p -->
    </div>
    <div class="footer">
        <h3>Sticky footer</h3>
        <p>Footer of variable height</p>
    </div>
</div>

그게 다야. div는 예상대로 래핑됩니다.

---

Dan Dascalescu 답변 에서 파생 된 크로스 브라우저 솔루션 :

http://jsfiddle.net/Uc9E2

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.l-fit-height {
    display: table;
    height: 100%;
}
.l-fit-height-row {
    display: table-row;
    height: 1px;
}
.l-fit-height-row-content {
    /* Firefox requires this */
    display: table-cell;
}
.l-fit-height-row-expanded {
    height: 100%;
    display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
    height: 100%;
    width: 100%;
}
@-moz-document url-prefix() {
    .l-scroll {
        /* Firefox requires this to do the absolute positioning correctly */
        display: inline-block;
    }
}
.l-scroll {
    overflow-y: auto;
    position: relative;
    height: 1000px;
}
.l-scroll-content {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1000px;
    min-height:100px;
}

<div class="l-fit-height">
    <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
            <p>Header</p>
        </div>
    </section>
    <section class="l-fit-height-row-expanded">
        <div class="l-fit-height-row-content l-scroll">
            <div class="l-scroll-content">
                <p>Foo</p>
            </div>
        </div>
    </section>
    <section class="l-fit-height-row">
        <div class="l-fit-height-row-content">
            <p>Footer</p>
        </div>
    </section>
</div>

---

사용하면 overflow:auto이 작업을 수행 할 수 있습니다.

데모

---

그래서 당신이 말하는 것은 끈적한 바닥 글입니다. 나는 가서 더 많은 조사를했고 여기에 내가 당신을 위해 가지고있는 것이 있습니다.

<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>

<div style="overflow:scroll;float:none;height:auto;">high content</div>

<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>

이렇게하면 고정 바닥 글이 표시됩니다. 키는 위치 : 고정 및 하단 : 0px입니다. 불행히도 이것은 스크롤 뷰의 콘텐츠 위에 마우스를 놓는다는 것을 의미합니다. 지금까지 이것을 알아내는 자바 스크립트 만있는 것 같지만 계속 살펴볼 것입니다.

ReferenceURL : https://stackoverflow.com/questions/8555820/set-div-to-remaining-height-using-css-with-unknown-height-divs-above-and-below