如何設置頁腳爲最後一個元素中的所有網站

Question

請檢查jsfiddle爲code.which不是在page.Footer結束未來一些其他的div被完成了它的數據之前。

我認爲主頁腳是頁腳的最後一頁，但它出現在右側和左側divs之前。

CSS : 

#main 
{ 
    margin:auto; 
    width:90%; 
    background-color:#b0e0e6; 
    text-align: center; 
} 
#header 
{ 
    margin:auto; 
    height:20px; 
    background-color:yellow; 
} 
#footer 
{ 
    margin:auto; 
    height:100px; 
    background-color:yellow; 
} 
#content 
{ 
    margin:auto; 
    width:100%; 
} 
#left 
{ 
    float : left; 
    width:20%; 
    background-color:pink; 
    display: inline-block; 
} 
#middle 
{ 
    width:60%; 
    background-color:white; 
    float : left; 
    display: inline-block; 
} 
#right 
{ 
    width:20%; 
    background-color:green; 
    float : right; 
    display: inline-block; 
} 


#master-head 
{ 
    margin:auto; 
    background-color:#b0e0e6; 
    text-align: center; 
} 
#master-foot 
{ 
    margin:auto; 
    background-color:#b0e0e6; 
    text-align: center; 
} 

HTML：

<div id="master-head">Master Header</div> 
<div id="main">main 
<div id="header">header</div> 
      <div id="content"> 
      <div id="left">left 
      1<br> 2<br> 3<br> 4<br>1<br> 1<br>1<br>1<br>1<br> 1<br> 1<br> 1<br> 1<br>11<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 
      <!-- 1<br> 2<br> 3<br> 4<br>1<br> 1<br>1<br>1<br>1<br> 1<br> 1<br> 1<br> 1<br>11<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>--> 
      1<br></div> 
      <div id="middle">middle</div> 
      <div id="right">right 
       1<br> 2<br> 3<br> 4<br>1<br> 1<br>1<br>1<br>1<br> 1<br> 1<br> 1<br> 1<br>11<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 
      <!-- 11<br> 2<br> 3<br>  4<br>1<br> 1<br>1<br>1<br>1<br> 1<br> 1<br> 1<br> 1<br>11<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>--> 
      </div> 
      </div> 
      <div id="footer">footer</div> 
</div> 
<div id="master-foot">Master Footer</div> 

Answer 1

的#footer的 -

#footer 
{ 
/* margin:auto; */ 
height:100px; 
background-color:yellow; 
margin-bottom: 0px; 
clear: both; 
} 

爲＃主尺 -

#master-foot 
{ 
/* margin:auto; */ 
background-color:#b0e0e6; 
text-align: center; 
margin-bottom: 0px; 
clear: both; 
} 

Answer 2

您可以只需添加一個clear: both：

#master-foot 
{ 
    margin:auto; 
    background-color:#b0e0e6; 
    text-align: center; 
    clear: both; 
} 

Answer 3

你缺少#footer一個clear: both;。

這裏的一個示範的jsfiddle它：http://jsfiddle.net/hjEfv/

Answer 4

您使用上的CSS浮子這意味着浮動元素將從對準的正常順序被刪除

。