html - 如何将页脚设置为所有网站的最后一个元素

Question

请检查 jsfiddle 用于代码。它不会出现在页面末尾。页脚出现在其他一些 div 完成其数据之前。

我希望主页脚作为页脚的最后一个，但它出现在左右 div 之前。

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 --

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