固定菜单位置，身高100％

Question

我真的不明白为什么我的例子不起作用，但像bootstrap这样的东西完美无缺。

<html style="height: 100%;">
<body style="height: 100%; padding-top: 70px;">   
    <div style="height: 100%; border: red solid;"></div>      
</body>
</html>

http://fiddle.jshell.net/QVmjd/2/

为什么我的100％身高超过100％？ 在http://getbootstrap.com/examples/navbar-fixed-top/中 ，一切正常吗？

UPD：更简单的bootstrap示例http://fiddle.jshell.net/C3vrB/1/

UPD2：理解差异的例子变得更加清晰

Answer 1

padding-top延伸或增加70px

  <body style="height: 100%; padding-top: 70px;">

Answer 2

这是由于CSS处理box model 。 查看W3C或CSS Tricks纲要 。

从根本上讲，框的高度由设置height ，以及任何额外的造型，例如padding ， margin和border被施加到该尺寸的外侧 ，所以你的元件正由扩展padding-top: 70px; 高于100％的70像素;

如果需要填充，可以按百分比添加填充：

height: 85%;
padding-top: 15%;

使您的盒子高度达到100％，或者您可以让外盒子具有固定的高度，并为子元素添加填充，这不会影响父级的盒子大小。

还可以选择在CSS中使用box-sizing属性，当设置为border-box ，将在框的声明宽度和高度内呈现填充，边框等。

Answer 3

你只需要这样做：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

然后你的填充将被计为100％高度或宽度的一部分