Question

是否有可能让DIV容器始终位于页面的末尾，如果页面内容没有填满底部的窗口，那么DIV是否固定在窗口底部？

请参阅以下JSFiddle：http://jsfiddle.net/r4g98muw/

＆＃34; .bottom＆＃34;的底部div不允许移动高于窗口的底部。使用Javascript，我可以给出＆＃34; .bottom＆＃34; -DIV postion：fixed;底部：0;如果我只有一个小文本，如果我有很多文本，我可以删除它。

没有Javascript会有诀窍吗？

＆＃13;

.bottom {
    background: yellow;
}

＆＃13;

<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  <div class="bottom">
    bottom
  </div>
</div>

＆＃13;

Answer 1

试试这个，

<div class="main">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  <div class="bottom">
    bottom
  </div>
</div>

.main{
   min-height:600px;
   position:relative;
}
.bottom {
    background: yellow;
    position: absolute;
    width: 100%;
    bottom: 0;
}

CSS定位在底部

1 个答案: