Question

这是我迄今为止所尝试过的：

＆＃13;

    .content{
      margin-bottom: 50px;
    }
    .bottom{
     position:absolute;
     height:50px;
     line-height: 50px;
     bottom:0;
     width:80%;
     background:green;
    }

＆＃13;

   <div class="content">
        ......
    </div>
    <footer class="bottom">
        <p>
        this is always at bottom
        </p>
    </footer>

＆＃13;

以下是Fiddle也是一个例子。

有人知道为什么会这样，以及我如何解决它？

谢谢！

Answer 1

1.您在CSS中做了一些小改动。根据您的demo link。

.parent {
    height:1500px;
    width:200px;
    border:1px solid grey;
    position: relative;
    background-color: white;
}
.topDiv {
    display:block;
    background:silver;
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0
}

.bottomDiv {
    background:red;
    width:100px;
    height:100px;
    position:absolute;
    bottom:0;
}

body {
    height:1500px;
    background: linear-gradient(#111, #777);
}

Answer 2

你必须使用position：fixed，才能实现这个目标!!

CSS

<style type="text/css">
.content{
  margin-bottom: 50px;
}

.bottom{
 position:fixed;
 height:50px;
 line-height: 50px;
 bottom:0;
 width:80%;
 background:green;
}


</style>

HTML

<div class="content">
    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>
</div>
<footer class="bottom">
    <p>
    this is always at bottom
    </p>
</footer>

绝对底部= 0的页脚不会停留在底部

2 个答案: