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：引导程序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 rundown。

基本上，您的框的高度由height设置，任何其他样式（如padding，margin和border）都会应用于 outside < / em>这个大小，所以你的元素被padding-top: 70px;扩展为高于100％的70像素;

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

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

将您的框高度设置为100％，或者您可以将外框设置为固定高度，并为子元素添加填充，这不会影响父元素的框大小。

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

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％高度或宽度的一部分

固定菜单位置，身高100％

3 个答案: