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對高度的影響

回答

相關問題