Question

我有两个div，top 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。有人可以帮我做吗？

Answer 1

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

  clear:both;

并删除 position：absolute;

Answer 2

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

从页脚中删除了position: absoulte。试试这个。因为页脚将保持在相同的位置，直到位置：绝对保持风格。

Answer 3

您已将页脚设置为position：absolute;。这意味着你的页脚应该有点固定，但是从它的父节点继承。

尝试将绝对值更改为相对值，然后查看是否符合要求。

Answer 4

的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

Answer 5

如果页面底部有一个粘性页脚，那就是你要找的东西，那么这可以帮到你：

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

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

<强>演示

Try before buy

如何向下或向上移动div？

5 个答案: