css中关于height:100%运用小知识

 

不知道有没有部分小伙伴在写静态时遇到这种情况？当你给一个元素的高度(height)为100%时，期望这个元素能撑满整个浏览器窗口的高度，但大多情况下好像并没有任何效果。当你手足无措不能生效时搜一搜就能找到答案了，但是你真的懂了吗？知道为什么height:100%不起作用吗？

1.属性百分比宽高的设定

按常理，当我们用CSS的height属性定义某个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。

而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度：

http://www.runoob.com/cssref/pr-dim-height.html

http://www.runoob.com/cssref/pr-dim-width.html

所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是200px，那么这个div的高度就是100px。

2.为什么你写的height:100%不起作用？

当设计一个页面时，你在里面放置了一个div元素，你希望它占满整个窗口高度，最自然的做法，你会给这个div添加height: 100%;的css属性。然而，如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗？

//给div宽高都加上100%属性
<div style="width: 100%;height: 100%;background-color: sandybrown;">
    宽100%，现在看到的高是属于文字的，并不是height！
</div>

然而好像并没有。

//那我们再给height一个200px呢？
<div style="width: 100%;height: 200px;background-color: sandybrown;">
如果我们把height调成200px呢？
</div>

可以看到基本上宽的100%很容易就实现的，但是这里的height却不能设置成%比的（该元素会消失看不见），这是为什么呢？

3.浏览器是如何计算高度和宽度的

为了理解为什么不会，你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

各个浏览器对于宽高的解析也不相同，大家可以自己搜索一下。

参考：http://www.webhek.com/post/css-100-percent-height.html

4.解决方法

上面的演示例子是父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。你可以根据父元素的背景色来判断子元素的高度不是100%。

高度百分比（%）属性是一个相对父元素计算得来的高度，要想使他有效，我们需要设置父元素的height:100%；要特别注意的一点是，现在你给了这个div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须同时设定<body>和<html>的高度：

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

5.如何让内容也居中？

要想内容也居中，可以如下做一个div嵌套，一个负责高度，一个负责居中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <style>
            body,
            html {
                height: 100%;
                margin: 0;
                padding: 0;
                font-size: 24px;
                color: white;
                text-align: center;
            }
            div {
                height: 100%;
                background-color: sandybrown;
                position: relative;
            }
            span {
                width: 100%;
                color: white;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div>
            <span>通过div嵌套方法来让内容也居中</span>
        </div>
    </body>
</html>

从这个演示中你可以看出，通过嵌套的方法内容也上下居中了。

---

2018.4.10 补充：

首先感谢 后宫学长 大佬的补充，确实还没有接触过，又学到了：

至于div居中可以更简洁，

父div给予如下属性：
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;

---

在使用height: 100%;时需要注意的一些事项

1. Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。
2. 如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。