如何適應HTML和正文中的所有內容

我有一個項目，並且我在body中遇到了麻煩。子元素總是在body之外，當我看着我的代碼時，它看起來沒問題，所以我做了一個實驗;我通過給他們一個邊界來追蹤每個HTML元素，以便我可以直觀地看到他們的行爲方式。這是我迄今爲止所擁有的。如何適應HTML和正文中的所有內容

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="index.css"> 
    <title>A nice example</title> 
</head> 
<body> 
    <div class="box"> 
     <div class="childbox"></div> 
    </div> 
</body> 
</html>

CSS實施例1，設置100％的高度的一切

html{height: 100%; border: 5px solid black; padding: 5px;} /*black*/ 
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/ 
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/ 
.childbox{height: 100%; border: 5px solid pink} /*pink*/

輸出：一切溢出外HTML。

CSS例2，創下100％的高度的身體和它的孩子，除了HTML

html{border: 5px solid black; padding: 5px;} /*black*/ 
body{height: 100%; border: 5px solid red; padding: 10px;} /*red*/ 
.box{height: 100%; border: 5px solid green; padding: 5px;} /*green*/ 
.childbox{height: 100%; border: 5px solid pink} /*pink*/

輸出：裏面的一切html適合，但不佔據屏幕的整個高度。我知道我可以使身體min-height: 100vh做到這一點..但它會停止膨脹時100vh滿..

我的目標是，

使身體和HTML 100％的高度/不使用vh。
並不會溢出體外，或HTML
添加子元素時，我想一切從HTML身體高度擴展動態，而不是去外面溢出，或相互重疊..
身體要在html裏面，div應該在body裏面。

請幫忙。

來源

2017-05-30 Marven Wilson S Donque

注意你的語言。這不是reddit。 – Rob

這就是發生了什麼，CSS正在計算100％的寬度和高度，然後它添加了10px/5px的填充，之後導致元素溢出10/5px。您可以通過在你的代碼的開頭添加以下CSS改變這一點：

* { 
    box-sizing: border-box; 
    //Edit: 
    margin: 0; 
    padding: 0; 
}

這將確保填充在100％的寬度和高度入賬。希望這個作品！
編輯：
此外，您在html和body風格要找的是不是height: auto; 100％。

來源

2017-05-31 00:05:04

在您的第一次css嘗試中使用此代碼。 –

您還需要記住默認情況下所有內容都有餘量和填充，並且您需要添加'* {margin：0; padding：0}'作爲你的css的第一行。這應該擺脫你的溢出。 –

如果發生這種情況，這意味着您在設計工作表時沒有遵循CSS框模型。你也可以使用CSS的box-sizing屬性。

考慮一個例子

<div id="frame">This is the frame 
</div>

然後使用箱式施膠性和其值設置爲邊界框。

<style> 
#frame{ width: xx% height:yy%; box-sizing:border-box; } 
</style>

來源

2017-05-31 04:28:22

如何適應HTML和正文中的所有內容

回答

相關問題