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). 这当然没有考虑 , 占用的任何空间marginpadding或者border它仍然会溢出一点。如果您确保您的 div 没有任何这些,则它可以完美运行。 这是我的JSFiddle。

您还可以使用position: absolute并将top值设置为40pxbottomto,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 回答