高队英语

在前端浏览器的页面添加滚动条时，你想把高度设置为100%，这样垂直滚动条就不会出来了，不过设置px还是不错的。

这张没有截图。。。。。(因为是我解决问题后总结的)

HTML中块级元素设置高度的实现:100%

当你将一个页面元素的高度设置为100%时，预计这个元素可以填满整个浏览器窗口的高度，但大多数情况下是无效的，没有任何作用。

为什么身高:100%无效？

按照常理，当我们使用CSS的height属性定义一个元素的高度时，该元素应该根据设置在浏览器的垂直空间中延伸相应的空间距离。例如，如果一个div元素的CSS是height:100 px；，那么它在页面的垂直空间应该占据100px的高度。但是根据w3c规范，percentage的高度应该根据这个元素的父元素容器的高度来设置。所以，如果你设置一个div的高度为height:50%；而它的父元素的高度是100px，那么这个div的高度应该是50px。

在设计页面的时候，你在里面放了一个div元素，你希望它占据整个窗口的高度。最自然的方式就是给这个div加上高度:100%。的Css属性。但是，如果你设置宽度为width:100%；，则该元素的宽度将立即扩展到窗口的整个水平宽度。身高会是这样吗？

错误的

要理解为什么不能，你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果您没有为宽度设置任何默认值，浏览器将自动平铺页面内容以填充整个水平宽度。

但是高度的计算方式完全不同。其实浏览器根本不计算内容的高度，除非内容超出窗口范围(导致滚动条出现)。或者你可以为整个页面设置一个绝对高度，否则浏览器会简单的让内容堆下来，页面的高度不予考虑。因为页面没有默认的高度值，所以当你将一个元素的高度设置为百分比时，你就无法得到父元素的高度，自然也就无法计算出自己的高度。换句话说，父元素的高度只是一个默认值:heightauto。当你要求浏览器根据这样的默认值计算百分比高度时，你只能得到未定义的结果。即空值，浏览器不会响应该值。

父元素没有固定的高度，所以子元素的高度:100%不起作用。

然后，如果您希望元素的百分比height: height:100%起作用，您需要给出。

高度被设置为一个值。

换句话说，需要付出？body和html元素的高度被设置为height下面的div的高度:100%。

百分比将生效。