Html 3个div列下面的页脚？

我似乎无法将页脚放在我所有的3

div

列下面，我相信它与高度有关。。当我使

div包装器600px

工作时，它位于所有3个下方，但当中间

div

比

600px

更高时，它位于正确的div下方，我该怎么做才能使它位于所有3个下方

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>

---

页脚上没有样式，可以添加：

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

清除：两个
属性。对于
清除：两者都有，元素的任何一侧都不能浮动。
宽度：100%
将使div拉伸窗口的宽度，可以根据需要进行编辑。
此外，您不希望在页脚之前关闭正文…
您必须在
页脚中添加
清除：左
。因为您正在CSS中使用
float:left
属性。因此，要清除float，您可以在主
容器上使用
overflow:hidden

另一个解决方案是可以使用
display:table
和
display table cell
CSS属性来进行这种布局。好的是，通过这种方法，所有
3列
都将具有相同的高度

注意：此外，在HTML代码中
标记应在
页脚
标记

检查

footer{background:gold; clear:left;}

你需要清理分区

这是你的电话号码

在包装CSS中添加位置：相对和溢出：隐藏，如下所示：

.wrapper {
margin: 0 auto;
max-width: 1500px;
min-width: 1000px;
overflow: hidden;
position: relative;
width: 100%;

}

HTML

footer{clear:both；}
将此添加到您的代码中。！！这对你有帮助吗？
.wrapper:after {
  content: " ";
  display: block;
  clear: both;
}

.wrapper {
margin: 0 auto;
max-width: 1500px;
min-width: 1000px;
overflow: hidden;
position: relative;
width: 100%;

<div class="wrapper">
    <div class="left"></div>
    <div class="middle">
        <p>example</p>
        <p>example</p>
        <p>example</p>
        <p>example</p>
        <p>example</p>
        <p>example</p>
    </div>
    <div class="right"></div>
    <footer>whaat</footer>
</div>

body, html {
    margin:0;
    background: #CCC;
    font-family: Arial, Helvetica, Tahoma, sans-serif;
    font-size: 14px;
    height:100%;
}
.wrapper {
    width: 100%;
    min-width: 1000px;
    max-width: 1500px;
    margin: 0px auto;
    height: 100%;
}
.left, .middle, .right {
    float:left;
    height: calc(100% - 50px);
}
.left, .right {
    width: 17%; 
}
.middle {
    background: #f1f1f1;
    width: 66%;
    text-align:center;
}
.left {
    background: #00F
}
.right {
    background: #00F
}
footer {
    height: 50px;
    text-align: center;
}