html - 3 个 div 列下方的页脚？

Question

我似乎无法将页脚放在我所有 3 div 的下方列，我相信它与高度有关。当我制作 div wrapper 600px 时它工作并在所有 3 个下面，但当中间 div比600px高它在正确的 div 下，我该怎么做才能让它在所有三个 div 下？

html:

<div class="wrapper"> 

    <div class="left">
    </div>

    <div class="middle">

   <p>
        example
    <p>
        example
    <p>
        example
    <p>
        example
    <p>
        example
    <p>
       example
    <p>


    </div>

    <div class="right">
    </div>


    </div> 

    </body>

    <footer> whaat </footer>

CSS:

body {
    margin: 45px auto;
    background: #CCC;
    font-family: Arial, Helvetica, Tahoma, sans-serif;
    font-size: 14px;
    }

.wrapper { 
    width: 100%; 
    min-width: 1000px; 
    max-width: 1500px; 
    margin: 0px auto;}

.left, .middle, .right { 
    float:left; }

.left, .right { 
    width: 16%; 
    padding:5px; 
    }

.middle  { 
    background: #f1f1f1; 
    border-radius: 3px 3px 3px 3px; 
    box-shadow: 0 1px 12px -2px #FFF;
    width: 65%; 
    padding:5px; 
    text-align:center; 
}

.left { background: #00F }
.right { background: #00F}

Answer 1

页脚没有样式，可以添加:

footer{
   clear:both;
   width:100%;
}

clear:both 属性 prevents the element it is applied to from having floating elements appear alongside it in the specified direction .对于 clear:both;，元素的任一侧 都不能 float 。width:100% 将使 div 拉伸(stretch)窗口的宽度，可以根据需要进行编辑。此外，您不想在页脚之前关闭正文...