首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如果只使用css,html元素如何填充剩余屏幕高度的100%?

如果只使用css,html元素如何填充剩余屏幕高度的100%?
EN

Stack Overflow用户
提问于 2011-09-09 14:19:35
回答 13查看 434.3K关注 0票数 137

我有一个header元素和一个content元素:

#header
#content

我希望标题是固定的高度和内容,以填补所有剩余的高度在屏幕上可用的overflow-y: scroll;

没有Javascript,这是可能的吗?

EN

回答 13

Stack Overflow用户

回答已采纳

发布于 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;
}
票数 95
EN

Stack Overflow用户

发布于 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
票数 20
EN

Stack Overflow用户

发布于 2012-09-20 23:14:44

被接受的解决方案实际上不会起作用。您会注意到,content div的高度将等于其父对象body的高度。因此,将body高度设置为100%会将其设置为等于浏览器窗口的高度。假设浏览器窗口的高度是768px,通过将content div的高度设置为100%div的高度将依次为768px。因此,您最终将得到标题div150px,内容div为768px。最后,您将在页面底部下面显示content 150px。有关其他解决方案,请查看this link.

票数 10
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7357818

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档