使用 CSS 将 div 设置为剩余高度，上下 div 高度未知

Posted 2023-03-06

【中文标题】使用 CSS 将 div 设置为剩余高度，上下 div 高度未知

【英文标题】：Set div to remaining height using CSS with unknown height divs above and below

【发布时间】：2012-01-23 06:11:30

【问题描述】：

是否可以让包装器填充窗口高度（无滚动）和中心 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可以吗？

【问题讨论】：

您是否尝试完成与此问题相同的基本任务？尽管可变高度会使它变得更加棘手。 ***.com/questions/8555157/…

类似但没有固定高度的页眉或页脚的布局，因此更改页眉或页脚的内容或向它们添加元素，不会影响中心div的css属性。

【参考方案1】：

2014 年更新：解决此布局问题的现代方法是 use the flexbox CSS model。所有主流浏览器和 IE11+ 都支持它。

---

2012：单独使用 CSS 的正确方法是使用 display: table 和 display: table-row。这些是supported by all major browsers，从 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 会按照您的预期进行包装。

【讨论】：

我想添加以下改进：jsfiddle.net/6dbyr 这允许在单元格内有一个可滚动的区域，占据整个高度。

Argh... 和一个大破坏者，这种改进在 Firefox 中不起作用。见bugzilla.mozilla.org/show_bug.cgi?id=794644 但这确实：***.com/questions/12605816/…

display: table-row 将删除应用它的项目的所有边框

在玩了***.com/questions/12605816/… 之后，它在除 Opera 之外的所有浏览器中都能正常工作：jsfiddle.net/Uc9E2

@danial 今天这对我很有帮助，非常感谢。它现在也可以在 Opera 中使用，因为它现在与 Chrome 非常相似。我认为你应该用这种方法来回答自己，因为我一直在尝试这个和那个，自己制作标记，谷歌搜索，尝试各种解决方案，只有你的解决方案在每个浏览器中都做了我需要的，即使是零更改来适应它。这是非常有用的小提琴，应该引起更多关注。

【参考方案2】：

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

【讨论】：

最好能对所有这些类进行一些解释。

【参考方案3】：

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

<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 可以解决这个问题，但我会继续寻找。

【讨论】：

从我的研究看来，做你所要求的唯一方法是通过javascript，因为css不支持引用的高度'ie height = (page.height - (header.height + footer .height)

【参考方案4】：

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

demo

【讨论】：

在您的示例中，您将高度设置为 80%，但我不知道中心 div 的高度，我只是希望它占用剩余空间。谢谢

@danial，你知道页脚和页眉的高度吗？ （以百分比或像素为单位）

不，我没有，我刚刚更新了问题。这取决于字体大小、填充和/或其他可能动态添加的元素。

如果可能的话，我不知道该怎么做。这里的常用方法是为页眉、内容和页脚分别指定一个基于百分比的大小。

可以使用display: table 和display: table-row 完成。见my answer。