爲什麼我的div的高度大於身體？

這是我的style.css基於Blankslate的Wordpress主題（我沒有改變任何PHP，我只是開始CSS）。爲什麼我的div的高度大於身體？

我已經突出顯示了元素的邊框以使它們可見...並且所有內容都溢出了body邊框。這是全部的CSS：

/* = CSS Reset 
-------------------------------------------------- */ 

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{} 


/* =Highlight 
highlight the basic structural elements of the site 
-------------------------------------------------- */ 

body {border: thin solid red;} 

#sidebar {border: thin solid blue;} 
#content {border: thin solid green;} 

/* =Structure 
-------------------------------------------------- */ 

body { 
    width: 1000px; 
    float: center; 
    margin: auto; 
} 

#sidebar { 
    width: 300px; 
    float: right; 
} 
#content { 
    width: 500px; 
    float: left; 
}

來源

2012-07-08 iDontKnowBetter

的所有內容添加一個容器周圍的花車overflow:hidden（出於某種原因，這似乎並沒有直接body工作，我認爲應該）。見demo。

並刪除float:center，沒有這樣的浮點值。要將body水平居中（或其他任何具有寬度的塊），您的margin: auto就足夠了。

來源

2012-07-08 01:57:48 bfavaretto

關於clearfix的更多信息（這是他們所引用的內容）：http://www.webtoolkit.info/css-clearfix.html – 2012-07-08 03:11:56

:(元素仍然出現在紅色輪廓之中......我沒有得到它不應該自動調整嗎？沒有我見過的CSS教程暗示我們需要做任何特殊的事情，以防止div出現在我的身體外面，我也嘗試過'clewar：both;'。 – iDontKnowBetter 2012-07-08 03:13:04

@fakaff看到更新後的答案，我認爲這可以在'body'元素上工作，但它不會，並且不會，它不應該自動調整，因爲您期待。浮動「不在流動中」，這意味着它們不會 – bfavaretto 2012-07-08 03:24:21

嘗試：

body { 
    clear: both; 
}

或身體年底有明確追加一個div：既CSS

像

<body> 
    <div id='sidebar'></div> 
    <div id='content'></div> 
    <div class='clear'></div> 
</body>

and the css

.clear { 
    clear: both; 
}

的問題是，你是浮體標籤

來源

2012-07-08 01:56:56 arieljuod

你的第一個建議是行不通的，但第二個會。 – bfavaretto 2012-07-08 03:27:33

我得到了我一個工作的定身和HTML兩種溢出隱藏&加入一些底部填充機體：

html { 
overflow: hidden; 
} 

body { 
overflow: hidden; 
padding-bottom: 2%; 
}

來源

2013-06-22 16:06:48 Saqalain

爲什麼我的div的高度大於身體？

回答

相關問題