我有一个header元素和一个content元素:
#header
#content
我希望标题是固定的高度和内容,以填补所有剩余的高度在屏幕上可用的overflow-y: scroll;
。
没有Javascript,这是可能的吗?
发布于 2011-09-09 14:32:19
技巧是在html和body元素上指定100%的高度。一些浏览器查看父元素(html、body)来计算高度。
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
发布于 2018-06-14 22:33:28
可以在min-height属性上使用vh。
min-height: 100vh;
您可以执行以下操作,这取决于您如何使用边距...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
发布于 2012-09-20 23:14:44
被接受的解决方案实际上不会起作用。您会注意到,content div
的高度将等于其父对象body
的高度。因此,将body
高度设置为100%
会将其设置为等于浏览器窗口的高度。假设浏览器窗口的高度是768px
,通过将content div
的高度设置为100%
,div
的高度将依次为768px
。因此,您最终将得到标题div
为150px
,内容div为768px
。最后,您将在页面底部下面显示content 150px
。有关其他解决方案,请查看this link.
https://stackoverflow.com/questions/7357818
复制相似问题