Bootstrap 3对高度的影响

我想知道使用百分比值时Bootstrap 3对高度的影响。Bootstrap 3对高度的影响

这里有一个简单的HTML：

<body> 
    <div class="content"> 
    <p>This is a div! </p> 
    </div> 
</body>

和css：

body { 
    padding-top: 100px; 
    height: 400px; 
    background-color: lightblue; 
    border: 5px solid green; 
} 

.content { 
    border: 5px solid red; 
    height: 100%; 
}

没有引导，this是结果。

使用引导程序时，结果改为this。

所以，这里是我的猜测：

不使用引导，高度：100％的仰望。内容的父母和寻找它的高度。因此，在这种情况下，.content将以height：400px结尾。而且由于体内有一个100px的填充顶部，为了匹配.content，身体必须增大100px，以500px结尾。

使用引导程序，高度：100％将尝试填充父级，而不是查看其高度，因此，由于存在100px填充顶部，.content将以高度：300px结束，并且身体保持在400px高度。

这是正确的吗？

如何在不使用引导程序的情况下复制bootstrap的功能？

在此先感谢！^-^

来源

2017-03-08 Tirafesi

你引导看到的大小是因为它使用box-sizing: border-box，而不是content-box默认值..

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

所以，如果不想使用引导，但具有相同的大小，只需添加CSS来设置框的大小为border-box。

Codeply Demo

来源

2017-03-08 18:24:06 ZimSystem

噢，我现在明白了。由于身体的高度是400px，填充顶部是100px，这意味着它的实际高度仅为300px（使用边框）的权利？所以当.content查找父级的高度时，它会读取值300px？ – Tirafesi

是的，这是正确的。 – ZimSystem

Bootstrap 3对高度的影响

回答

相关问题