如何设置固定位置元素高度到达浏览器窗口底部？答案

【问题标题】：How to Set Fixed-Position Element Height to Reach Bottom of Browser Window?如何设置固定位置元素高度到达浏览器窗口底部？
【发布时间】：2013-03-27 09:40:17
【问题描述】：

我有一个页面，顶部有一个标题，左边有一个侧边栏，右边有一个主要内容区域。简化版见http://jsbin.com/iqibew/3。

侧边栏的样式为position: fixed，因此它不会随着页面的其余部分滚动。这可行，但如果内容太长而无法容纳，我还需要侧边栏本身滚动。

这只有在我可以为侧边栏设置正确高度的情况下才有可能。但我找不到任何方法来设置这个高度。 100% 已接近，但它太高了，因为边栏从标题下方开始。

有没有办法解决这个问题。我对 CSS 或 JavaScript/jQuery 解决方案持开放态度。

【问题讨论】：

这是close enough吗？我做了一些你可能不想要的改变，但我不知道有没有办法用top offset 做你想做的事情。
我想弄清楚你到底做了什么。我试图避免更改容器的样式，例如 <html> 和 <body>，但到目前为止，如果我删除这些样式，它似乎仍然有效。
我正朝着不同的方向前进。我将bottom 和top 设置为0 和margin-top: 120px; 以获得你想要的。
我认为您确实需要html, body height: 100%，否则您将回到没有触发滚动的高度。
这里是least changed version，只有top 和margin 设置。我明白你在不需要 html, body 位的意思......？编辑：还有manually replicated（不要忘记bottom: 0）。

标签： javascript jquery html css css-position

【解决方案1】：

我想我会发布这个，因为它似乎有效：

div#header-div {
    height: 90px;
    background-color: lime;
    margin: 0;
}
div#fixed-div {
    position: fixed;
    left: 0;
    top: 0;            /* <<< No offset */
    bottom: 0;         /* <<< Pull to the bottom for height */
    margin: 120px 0 0; /* <<< Give it the 120px top */
    width: 260px;
    background-color: silver;
    overflow-y: scroll;
}

http://jsbin.com/iqibew/13/

【讨论】：

在进一步测试中，看来我什至不需要margin: 120px 0 0;。我想我可以将 JavaScript 的顶部设置为 0，将底部设置为 0。仍在测试中。
对。你有一个错字：top 120px;。是的：jsbin.com/iqibew/17 修正错字并添加bottom: 0，你很高兴。
请注意，在旧版浏览器中同时设置 top 和 bottom 无法正常工作：stackoverflow.com/a/5070238/1064286

【解决方案2】：

如果您希望您的 div 大小随心所欲，我有一个选项供您选择

//将此添加到<head> 部分，我以为您在示例中没有一个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"  >
</script>

      <script type="text/javascript"  >
$(document).ready(function() {

function _resizeTDiv()
{
   var p = $("#header-div");
   var position = p.position();
   var realheight = p.position().top+p.height();
 $("#fixed-div").height( $(document).height()-realheight -5); //+-5 Error? , not needed
}
 _resizeTDiv();

//Resize  our div on window resize?
$(window).resize(function() {
 _resizeTDiv();
});

});

</script>

【讨论】：