将 div 置于屏幕底部答案

【问题标题】：position div at bottom of screen将 div 置于屏幕底部
【发布时间】：2015-03-17 20:26:01
【问题描述】：

我试图在视口底部获取一个 div，但它似乎无法正常工作。我已经设置好了

html

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

css

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

问题在于父 div 是从 JS 获取高度并动态添加一些样式到 div 像<div class="parent" style="height: 483px;"> 这样基本上 div 不会显示在底部，直到我调整屏幕大小。有没有办法动态获取屏幕大小然后添加css使div贴在底部？

【问题讨论】：

只是为了澄清问题，您是否希望.bottom 元素始终可见并位于屏幕底部？或者您希望它像页脚一样仅在文档底部可见（在这种情况下，如果您的内容大于屏幕尺寸，它将不可见）？据我了解，your code is working well
我希望它始终在屏幕底部可见。
EyasSH 的回答应该可以解决问题。 Here is the kind of behavior 它将提供给您的 bottom 类元素。只需将position:fixed; 应用于您的bottom 元素。
重复 L 试试这个堆栈问题答案：[在此处输入链接描述][1] [1]：stackoverflow.com/questions/27985248/…
Make div stay at bottom of page's content all the time even when there are scrollbars 的可能副本

【解决方案1】：

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

如果您的文档最终比屏幕尺寸长，这很重要。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

这将解决您的问题

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：