位于屏幕底部的div

Question

我试图在视口的底部获得一个div，但它似乎没有正常工作。我有这个设置

HTML

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

CSS

.bottom{
  position:absolute;
  bottom:0;
}

麻烦的是父div从JS获得它的高度并且像<div class="parent" style="height: 483px;">一样动态地添加一些样式到div，所以基本上div不会显示在底部直到我调整屏幕大小。有没有办法动态获取屏幕大小然后添加CSS以使div粘在底部？

Answer 1

使用position: fixed;代替绝对。这将使元素相对于视口而不是文档。

如果您的文档最终超过屏幕尺寸，则这很重要。

Answer 2

这将解决您的问题

.bottom { 
    position:fixed;
    bottom:0;
    z-index:2;
    width:100%; 
}

Answer 3

绝对位置元素相对于具有静态位置的第一个父元素定位。具有固定位置的元素相对于浏览器窗口定位，即使滚动窗口也不会移动。你应该改变CSS

.bottom{
  position:fixed;
  bottom:0;
}

Answer 4

您是否尝试在视口底部放置页脚？这可能会有所帮助：http://css-tricks.com/snippets/css/sticky-footer/

此外，如果您希望.bottom相对于.parent定位，则需要添加位置：相对于.parent。然后是底部：0将.bottom放在.parent的底部。

Answer 5

你要做的是将你的div的位置改为固定而不是绝对，这样javascript的造型就不会有问题了

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

.bottom{
  position:fixed;
  bottom:0;
}