请看以下内容:http: //jsfiddle.net/ran5000/uZ7dD/
div的header
固定高度为 40px,我希望content
div 将使用屏幕的剩余高度而无需滚动并且无论屏幕高度如何。
有任何想法吗?
请看以下内容:http: //jsfiddle.net/ran5000/uZ7dD/
div的header
固定高度为 40px,我希望content
div 将使用屏幕的剩余高度而无需滚动并且无论屏幕高度如何。
有任何想法吗?
我一般使用position:absolute
这个,然后将顶部值设置为从标题的底部开始。
http://jsfiddle.net/uZ7dD/4/
.content {
background-color: yellow;
position:absolute;
top:40px; bottom:0; left:0; right: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;
}
希望我能帮忙:)
我不确定浏览器对calc
CSS 功能的支持是什么样的,但这对它来说是一个很好的例子。你可以在这里阅读。您需要将height
div 的content
更改为height: calc(100% - 40px)
. 这当然没有考虑 , 占用的任何空间margin
,padding
或者border
它仍然会溢出一点。如果您确保您的 div 没有任何这些,则它可以完美运行。 这是我的JSFiddle。
您还可以使用position: absolute
并将top
值设置为40px
和bottom
to,0px
但您的父元素需要position: relative
设置。
content
或者,您可以使用 JavaScript/jQuery 计算所需的div高度并应用它。
在这种情况下,表格元素的属性具有一定的优势,因为它们具有很大的定位能力。在这种情况下,表格行和单元格将始终调整以填充表格容器。
显然,您不想使用实际的 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; }
这种方法还具有跨浏览器得到很好支持的好处。