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

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。正如另一位评论者已经指出的那样，您可能需要更改父static元素的#sidebar位置。

据我所知，这将是唯一的非Javascript方法，但只有在侧边栏为100％时才会起作用。

使用JavaScript的显着替代选项：

让我们说你知道你正在使用的所有元素的高度。然后，您只需调整margin-top元素的div属性即可放置在底部。

这看起来像这样：

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底部的内容高度，或者您是否关心交叉兼容问题（{ {3}}）。

此代码看起来像这样：

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

查看although I would say it has pretty good support，看看这是否是您希望进一步探索的选项。