0

我有两个 div，顶部 div 的样式如下：

.context_left {
    float:left;
    display:inline-block;
    width:775px;
    padding-left:10px;
    margin-top:20px;
    min-height:450px;
    margin-bottom:20px;   
}

而它下面的 div 有样式：

  .footer {
        width:100%;
        height:54px;
        display:block;
        position: absolute;
        margin-top:80px;
        left:0;   
  }

当 div context_left 改变它的高度时，div 页脚保持在它的位置，如果 context_left div 改变它的高度，我想将页脚 div 向下移动。任何人都可以帮我做吗？

4

5 回答 5

1

您是否尝试将此 lign 添加到您的 .footer

  clear:both;

并删除位置：绝对；

于 2013-08-21T11:08:57.717 回答
0 
.footer {
    width:100%;
    height:54px;
    display:block;
    margin-top:80px;
    left:0;   
}

position: absoulte从页脚中删除。尝试这个。因为页脚将保持在同一位置，直到 position:absolute 保持样式。

于 2013-08-21T11:07:14.723 回答
0

您已将页脚设置为 position: absolute;。这意味着您的页脚应该是固定的，但从其父级继承。

尝试将绝对更改为相对，看看这是否是您想要的。

于 2013-08-21T11:08:56.077 回答
0

CSS：

 .context_left {
        float:left;
        width:775px;
        padding-left:10px;
        margin-top:20px;
        min-height:450px;
        margin-bottom:20px;  
        display:inline-block;

    }


      .footer {
            width:100%;
            height:54px;
            display: block;
            clear:both;
            margin-top:80px;
            left:0;   

      }

工作小提琴：http: //jsfiddle.net/dMawS/show

于 2013-08-21T11:17:12.670 回答
0

如果页面底部的粘性页脚是您要查找的内容，那么这可以帮助您：

html {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    /* the margin compensates the footer plus the footer's top margin */
    margin: 0 0 134px 0;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 54px;
}

页脚将始终位于浏览器视口的底部或内容下方。

演示

先试后买

于 2013-08-21T11:21:13.300 回答