子元素走出父母的

比方說，我們有這個網站：子元素走出父母的

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
    <div id="navbar"></div> 
    <div id="main"> 
     <textarea id="input"></textarea> 
     <textarea id="output"></textarea> 
    </div> 
</body> 
</html>

這個CSS：

html,body,#main{ 
    height:100%; 
} 

html{ border: 1px solid red; } 
body{ border: 1px solid green; } 
#main{ border: 1px solid blue; } 
#navbar{ height: 30px; } 

textarea{ 
    width: 45%; 
    height: 60%; 
    resize: vertical; 
} 

#input{ 
    float: left; 
} 

#main{ 
    float: right; 
}

如果你看一下結果，那麼你可以看到here身體失去的HTML標籤，#main超出正文和html標記..我如何使所有元素不超出父母身高？因此，我希望得到的結果是這樣的：

enter image description here

來源

2013-10-13 biox

您可以在#main和溢流加保證金左緣和右：藏在身上！這裏是[jsfiddle]（http://jsfiddle.net/2Fzze/1/） – WhatisSober

一方面，該body通過重置那些有8px;

啓動默認的利潤率。

body { 
    margin:0px; 
}

此外，borders不計算入高度，而它們加入。因此，高度真的是100％+ 2px的邊界。您可以通過添加box-sizing: border-box;來更改此項。

這將解決html/body的問題。現在，對於#main - 這是發生的原因，是因爲30pxnav放在它之外。 #main實際上是100％，但它是100%在30px下，這就是爲什麼你看到了一個差距。

Updated jsFiddle here

來源

2013-10-13 04:57:38

子元素走出父母的

回答

相關問題