56

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

<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可以吗？

4

4 回答 4

82

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 包装如您所料。

于 2012-09-03T05:03:43.847 回答
5

源自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>

于 2014-11-16T16:46:03.037 回答
-2

使用overflow:auto会让你做到这一点。

演示

于 2011-12-19T00:01:19.940 回答
-2

所以你在说的是一个粘性页脚。我去做了一些更多的研究，这就是我为你准备的。

<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；不幸的是，这意味着它也悬停在滚动视图中的任何内容之上。到目前为止，似乎只有 Javascript 可以解决这个问题，但我会继续寻找。

于 2011-12-19T01:45:33.117 回答