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