在css设置高度height：100%滚动条不出来，设置具体好使

在前端浏览器的页面加滚动条时，想要设置高度百分之百，之后垂直滚动条不出来，而设置px却好使。

这块没有截图。。。。。（因为我是解决了问题之后总结）

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

当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，无效，这样的做法没有任何效果。

为什么height:100%不起作用无效呢

按照常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height:100px;，那它应该在页面的竖向空间里占满100px的高度。而跟w3c的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height:50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。

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

错

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

但是高度的据计算方式完全不一样。事实上浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度，否则，浏览器就会简单的让内容往下堆砌，页面的高度就无需考虑。因为页面并没有缺省的高度值，所以当你让一个元素的高度设定为百分比，无法获取到父级的高度，自然也无法计算自己的高度。换句话说父元素的高度只是一个缺省值: heightauto当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

父元素没有设定固定高度，于是子元素的高度height:100%也不会起作用。

那么，如果想让一个元素的百分比高度: height:100%起作用，你需要给这个元素的所有父级元素的

高度都设定一个值。

换句话说，需要给     body和html元素的高度都设置为height:100%下面的div的高度

的百分比才会生效

当我们给块级元素设置响应式高度的时候，例如给div设置height=50%，往往没能看到效果。

原因是百分比的大小是相对其父级元素宽高的大小，如最外层元素设置的百分比是对应屏幕而言的。

需要了解的是对于宽度来说，其父级元素无须确定宽度就能设置百分比，例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果：

父元素css： position: relative/absolute; left: 50%;

子元素css： position: relative; left: -50%;

但高度则不同，若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式，我们可以这样解决（假设最外层的div需要设置百分比高度样式）：

html, body {

height: 100%;

}

outDiv {

height: 50%;

}

不过这里有个需要注意的，若div里的内容超出了div的高度，在IE7+的浏览器是无法将div撑起来的（IE6则可以），如果要顾及这一点，可以使用min-height解决（当然也要考虑IE6不支持min-height的问题）：

html, body {

height: 100%;

}

outDiv {

min-height: 50%;

}

html outDiv {

height: 50%;

}

最后说通俗点，如果你想把高度设为百分比，那么父级必须设置高度

最小高度，CSS3中的样式。IE6不支持。

比如min-height:20px;

意思是说，一个块元素，高度如果小于20像素，那么这个块元素就不会再自动变小，而是保持20像素不变。如果大于20像素，那么不受限制

至于，取值100%的意思，是这个高度值使用父元素的高度值做限定

以上就是关于在css设置高度height：100%滚动条不出来，设置具体好使全部的内容，包括:在css设置高度height：100%滚动条不出来，设置具体好使、css中min-height和height的问题、css属性解释：min-height: 100%;等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！