0

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

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

有任何想法吗？

4

5 回答 5

2

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

.content {
    background-color: yellow;
    position:absolute; 
    top:40px; bottom:0; left:0; right:0;
}
于 2013-10-04T17:44:35.230 回答
0

对于 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;
    }

希望我能帮忙:)

于 2013-10-04T17:54:17.367 回答
0

你是这样的意思吗？

如果是这样，我用过

position: fixed;

CSS 中的属性。

于 2013-10-04T17:41:39.757 回答
0

我不确定浏览器对calcCSS 功能的支持是什么样的，但这对它来说是一个很好的例子。你可以在这里阅读。您需要将heightdiv 的content更改为height: calc(100% - 40px). 这当然没有考虑 , 占用的任何空间margin，padding或者border它仍然会溢出一点。如果您确保您的 div 没有任何这些，则它可以完美运行。 这是我的JSFiddle。

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

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

于 2013-10-04T17:45:50.610 回答
0

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

显然，您不想使用实际的 table 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; }

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

于 2013-10-04T19:05:01.677 回答