html - 截面高度 100% 不起作用

Question

所以我试图用 section 制作“部分”来覆盖当前页面的整个高度。有点像this 。正如你所看到的，宽度设置为 100。这是我的代码

.cont{
background: #009dff;
height: 100%;
} 

但由于某种原因，它似乎不起作用。这是 demo 。有什么想法吗？

Answer 1

这应该可以。

http://jsbin.com/vijaxuyu/2/edit?html,css,output

html{
  height:100%;
}
body{
  height:100%;
}
section {
  height: 100%;
}

html 和 body 的高度百分比默认情况下不是 100%。因此，您需要明确通知您的浏览器。之所以必须分别指定 height 和有时 min-height 到 html 和 body 是因为这两个元素都不是具有任何固有的高度。默认情况下，两者都是 height: auto 。视口(viewport)的高度为 100%，因此从视口(viewport)获取 height: 100%，然后将其应用于 body 作为允许内容滚动的最小值。