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

Question

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

57

是否可能使包装器填充窗口高度（无滚动），并使中心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的高度都未知（没有设置像素或百分比，即变量字体大小或填充）。是否可能使用纯CSS实现？

- danial

你是否试图完成与此问题相同的基本事情？虽然变量高度会使它棘手。 http://stackoverflow.com/questions/8555157/full-screen-css-with-minimum-size/8555283#8555283 - justisb

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

4个回答

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>

- danial

3

希望对这些课程进行一些解释会很好。 - velis

-2

使用overflow:auto可以实现此功能。

演示

- Brigand

2

在你的例子中，你将高度设置为80％，但我不知道中心div的高度，我只想让它占用剩余的空间。谢谢。 - danial

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

1

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

如果可能的话，我不知道如何做到这一点。在这里通常的方法是给头部、内容和页脚分别设置基于百分比的大小。 - Brigand

可以使用 display: table 和 display: table-row 来实现。请参见我的回答。 - Dan Dascalescu

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

这将为您提供一个固定的页脚。关键是position:fixed和bottom:0px;不幸的是，这意味着它也会悬停在滚动视图中的任何内容上方。到目前为止，似乎只有JavaScript可以解决这个问题，但我会继续寻找。

- Kevrone

2

从我的研究来看，似乎你所要求的唯一方法是通过JavaScript实现，因为CSS不支持引用高度，即高度=（页面高度 -（页眉高度+页脚高度））。 - Kevrone

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan Dascalescu · Accepted Answer

2014年更新：解决这个布局问题的现代方法是使用flexbox CSS模型。它被所有主流浏览器和IE11+支持。

2012年：仅使用CSS正确的方法是使用display:table和display:table-row。这些属性被所有主流浏览器支持，包括IE8。这并不是使用表格进行显示。您将使用divs：

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被包裹在你所期望的位置。