Question

我似乎无法将页脚放在我的所有3 div列的下方，我相信它与高度有关...当我div wrapper 600px它的工作原理时在所有3下面但是当中间div更高然后600px它在正确的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;，任何东西都不能漂浮在元素的侧。 width:100%将使div拉伸窗口的宽度，可以根据需要进行编辑。另外，你不想在页脚之前关闭身体......

Answer 2

您必须在clear:left中添加footer。因为您在CSS中使用float:left属性。因此，要清除浮动，您可以在主overflow:hidden div上使用container。

另一种解决方案是您可以使用display:table和display-table-cell CSS属性来进行此类布局。好的方法是通过这种方法，所有3 columns都会equal height。

注意：此外，您的HTML代码</body>标记应在之后关闭 footer代码。

选中 DEMO 。

footer{background:gold; clear:left;}

Answer 3

您需要清除div

以下是demo

.wrapper:after {
  content: " ";
  display: block;
  clear: both;
}

Answer 4

添加位置：relative和overflow：隐藏在Wrapper CSS中，如下所示：

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

}

Answer 5

Demo

HTML

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

CSS

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

3个div列下面的页脚？

5 个答案: