使 div 浮动到静态导航元素的底部

Question

我有以下基于 Bootstrap 的代码：

<div id="sidebar-wrapper" class="collapse sidebar-collapse">
    <nav id="sidebar">
       <ul id="main-nav" class="open-active">
           ....
       </ul>
    </nav>
</div>

这是#sidebar 的CSS：

#sidebar {
  width: 100%;
  float: none;
  position: static;
}

这将创建一个从上到下延伸的漂亮侧边栏。但是，我似乎无法弄清楚如何添加位于侧边栏最底部的 div。

我的意思截图：

这是屏幕截图中 Test Div 的代码：

<div style="position: absolute; bottom: 0;">
    Test Div
</div>

Answer 1

尝试在侧边栏中添加您的 div，并为您的 CSS 添加：

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

Answer 2

您不能将#sidebar 更改为position:relative？这应该使绝对定位工作。

Answer 3

如果边栏占满页面高度的 100%，您可以创建一个 absolute 位于边栏中的包装器，并将 bottom 属性设置为 0px.

这应该看起来像这样：

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

它是 straight from this example。正如另一位评论者已经指出的那样，您可能必须更改父 #sidebar 元素的 static 定位。

据我所知，这将是唯一的非Javascript方法，但它仅在边栏处于 100% 时才有效。

值得注意的替代选项使用 JavaScript:

假设您知道正在使用的所有元素的高度。然后，您可以简单地将 div 元素的 margin-top 属性调整为放在底部。

这看起来像这样：

window.onload = function() {
    var header = document.getElementById("heading");
    var bottom = document.getElementById("bottom");
    var height = document.body.scrollHeight;

    bottom.style.marginTop = (height - header.clientHeight) + 'px';

}

希望对您有所帮助！

编辑：

现在我想得更多了，这是 calc() CSS3 function 的完美用例。您可能想检查一下。

使用它有一些注意事项，比如如果您 100% 都不知道底部 div 内容的高度，或者如果您关心交叉兼容性问题（although I would say it has pretty good support).

这段代码看起来像这样：

.bottom {
    /* should be moved down a distance equal to the height of
       parent container minus the height of the bottom div
       and the div above it */
    margin-top: calc(100% - (20px + 40px));
}

查看 these neat use cases 看看这是否是您想要考虑进一步探索的选项。

使 div 浮动到静态导航元素的底部

Making a div float to the bottom of a static nav element

css

twitter-bootstrap