一个html元素如何只用css填充剩余屏幕高度的100％？ | 一个html元素如何只用css填充剩余屏幕高度的100％

本文介绍了一个html元素如何只用css填充剩余屏幕高度的100％？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个标题元素和一个内容元素：

I have a header element and a content element:

#header
#content

我希望标头的高度固定，并且内容填满屏幕上剩余的所有高度， code> overflow-y：scroll; 。

I want the header to be of fixed height and the content to fill up all the remaining height available on the screen, with overflow-y: scroll;.

这可能没有Javascript？感谢。

It this possible without Javascript? Thanks.

推荐答案

这个技巧是指定 height：100％; 放在 html 和 body 元素上。
某些浏览器会查看父元素（ html ， body ）来计算高度。

The trick to this is specifying height: 100%; on the html and body elements.Some browsers look to the parent elements (html, body) to calculate the height.

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

这篇关于一个html元素如何只用css填充剩余屏幕高度的100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！