html - 如何创建一个延伸到页面底部的 div？

Question

如果您注意到 twitter 的主页有一个始终延伸到页面底部的 div。我检查了 CSS，看起来他们在使用

min-height:100%

但是，当我在此处的 jsfiddle 中对其进行测试时，这不起作用

如何创建一个始终延伸到页面底部的 div？

Answer 1

您还需要确保您的 body 和 html 也有 100% 的高度。

html, body {
  height: 100%;
}

Answer 2

您可以通过使用height:100%;. 另请注意，高度 100% 需要设置为父容器。在这种情况下html,body { }

如果html,body { }未设置为 100%，则里面的容器只会拉伸其容器高度的 100%。

http://jsfiddle.net/z5qVh/2/

 html,body {
        height:100%;
    }
    #all{
        height: 100%;
        background: #ff0000;
    }