使用具有未知高度div的CSS上下的CSS将div设置为剩余高度 [英] Set div to remaining height using CSS with unknown height divs above and below

问题描述

是否可以使包装器填充窗口高度（无滚动）和中心div可滚动而不乱动像素和javascript？

 < div id =wrapper> 
< h1>标题< / h1> 
< div id =center> 
< div style =height：1000px>高内容< / div> 
< / div> 
< div id =footer> Footer< / div> 
< / div> 
  

基本上我想要标题在顶部可见，页脚始终在底部可见并且在中心有一个可滚动的内容占据着剩余高度。

头部，页脚和中心div的高度都是未知的（没有设置px或％，即可变的字体大小或填充）。

从 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需要这个* / display：table-cell;}。 display：table-row;}。l-fit-height-row-expanded> .l-fit-height-row-content {height：100％; width：100％;} @  -  moz-document url-prefix（）{.l-scroll {/ * Firefox需要这个做绝对定位* / display：inline-block; }}。l-scroll {overflow-y：auto;位置：相对; 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>标题< / 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>页脚< / p> < / div> < / section>< / div>  

Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript?

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

Basically I want the header to be visible at the top and the footer to be always visible at the bottom and have a scrollable content in the center which occupies the remaning height.
The header, footer and center divs' heights are all unknown (no set px or %, i.e. variable font-size or padding). Is it possible with pure CSS?

解决方案

A cross-browser solution derived from Dan Dascalescu answer:

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>

这篇关于使用具有未知高度div的CSS上下的CSS将div设置为剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！