Fe-interview: [css] 第85天 怎么让body高度自适应屏幕？为什么？

[haizhilin2013]

第85天 怎么让body高度自适应屏幕？为什么？

[KongXiaoYan03]

html,body{height:100%}

[pokerLife]

同楼上，html,body同时设置成100%才有效，html百分比是相对于浏览器而言的，其他元素相对于父元素。

注意：这样设置会使-webkit-overflow-scrolling: touch;不起作用，之前遇到过这种问题，不对的请指正。

[nowherebutup]

body{
height: 100vh;
}

[dondonZh]

body{height:100%}

[haizhilin2013]

@nowherebutup @dondonZh 只写body应该不行吧？

[xiangshuo1992]

@nowherebutup @dondonZh 只写body应该不行吧？

100vh是可以的，在任何地方，100%的话需要从HTML开始。

[JiangXue93]

不知道我理解对不对

为何只设置body{height：100%}不行？
height：100%是相对于父元素来说的，如果只设置body的高度属性，由于其父元素是html高度未设置，且并非浏览器窗口高度，所以只设置body为100%是不能达到效果的，必须html，body都设置100%。而body{height: 100vh}直接把高度设置成了视口高度，与html大小无关，所以只在body设置vh是可行的。

[jiamianmao]

不知道我理解对不对

为何只设置body{height：100%}不行？
height：100%是相对于父元素来说的，如果只设置body的高度属性，由于其父元素是html高度未设置，且并非浏览器窗口高度，所以只设置body为100%是不能达到效果的，必须html，body都设置100%。而body{height: 100vh}直接把高度设置成了视口高度，与html大小无关，所以只在body设置vh是可行的。

贤弟理解很到位。

[Konata9]

DOM 元素的 height 当设为百分比时，只有当父元素有一个定高的值时才会生效，否则不起作用。
因此要让 body 高度自适应就必须要在 html 上设置定高。而 html 的父级就是浏览器，html 的宽高由浏览器决定。浏览器的宽高是定值，因此需要给 html 和 body 同时设置 100%。

另外也可以给 body 设置一个 min-height: 100vh; 让 body在高度不够时可以撑满整个屏幕。（做验证可以使用 border，background 即便是高度不足时，浏览器也会天，填满颜色。

https://codepen.io/Konata9/pen/OJLWKJp?editors=1111