Question

请查看以下内容：http://jsfiddle.net/ran5000/uZ7dD/

header div的固定高度为40px，我希望content div将使用屏幕的剩余高度而无需滚动，无论屏幕高度如何。

任何想法？

Answer 1

我通常使用position:absolute，然后将顶部值设置为从标题的底部开始。 http://jsfiddle.net/uZ7dD/4/

.content {
    background-color: yellow;
    position:absolute; 
    top:40px; bottom:0; left:0; right:0;
}

Answer 2

你的意思是that吗？

如果是的话，我已经使用了

position: fixed;

CSS中的

属性。

Answer 3

我不确定calc CSS功能的浏览器支持是什么，但这对它来说是个好例子。你可以阅读它here。您需要将height div的content更改为height: calc(100% - 40px)。当然，这并未考虑margin，padding或border占用的任何空间，因此它仍然会溢出一点。如果你确定你的div没有任何一个它完美的工作。 Here is my JSFiddle for it.

您还可以使用position: absolute并将top值设置为40px，将bottom设置为0px但您的父元素需要position: relative设置。

或者，您可以使用JavaScript / jQuery计算content div所需的高度并应用它。

Answer 4

对于css3浏览器，只需使用：

    .content {
        width: 100%;
        background-color: yellow;
        height: -moz-calc(100% - 40px);
        height: -webkit-calc(100% - 40px);
        height: -o-calc(100% - 40px);
        height: calc(100% - 40px);
    }

对于非css3浏览器使用此解决方法， HTML：

    <div class="container">
        <div class="header">i am the header</div>i am the <content></content>
    </div>

CSS

    .header {
        width: 100%;
        height 40px;
        line-height: 40px;
        background-color: blue;
    }

    .container{
        height: 100%;
        background-color: yellow;
    }

希望我能提供帮助：）

Answer 5

在这种情况下，表元素的属性具有一些优势，因为它们具有很多定位能力。在这种情况下，表格行和单元格将始终调整以填充表格容器。

显然，你不想使用实际的表格html元素，因为这不是语义，这就是css进入游戏的地方：

如果在标题和内容周围放置一个容器/包装元素，然后将其设置为display: table;，其高度和宽度均为100％，则它将作为基表元素。

将标题和内容设置为display: table-row;现在将它们与该容器相关联，并允许所有内容共享表属性。在一个上设置固定高度仍然有效，另一个将只填充剩余空间。

<div class="container">
    <div class="header">i am the header</div>
    <div class="content">i am the <content></content></div>
</div>

和css：

.container { display: table; width: 100%; height: 100%; }
.header, .content { display: table-row; }

这种方法还具有跨浏览器得到良好支持的好处。

HTML - div占用剩余页面高度的100％

5 个答案: