html - CSS定位在底部

Question

是否有可能使 DIV 容器始终位于页面末尾，并且如果页面内容没有填满窗口底部，则 DIV 固定在窗口底部？

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

“.bottom”div 的底部不允许高于窗口底部。使用 Javascript，我可以给“.bottom”-DIV position:fixed;底部:0；如果我只有一点点文字，如果我有很多文字，我可以将其删除。

有没有不用Javascript的技巧？

.bottom {
    background: yellow;
}

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

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