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

Question

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

javascriptjqueryhtmlcsscss-position

3

我有一个页面，顶部有标题，左侧有侧边栏，右边有主内容区。简化版可以在http://jsbin.com/iqibew/3中看到。

侧边栏具有“position：fixed”的样式，因此它不会随着页面的其余部分滚动。这个很好用，但是如果侧边栏本身的内容太长无法容纳，则还需要滚动侧边栏。

只有设置正确的侧边栏高度才能实现这一点。但我找不到任何设置此高度的方法。100％的高度接近，但因为侧边栏从标题下方开始，所以太高了。

没有办法解决这个问题吗？我可以接受CSS或JavaScript / jQuery解决方案。

- Jonathan Wood

我正在努力弄清楚你到底做了什么。我试图避免更改像<html>和<body>这样的容器的样式，但到目前为止，如果我删除这些样式，它似乎仍然有效。 - Jonathan Wood

我认为你确实需要 html，body height: 100%，否则你又回到了没有高度来触发滚动的状态。 - Jared Farrish

这是最少更改版本，只设置了top和margin。我明白你的意思，html，body部分似乎不需要...？编辑：并且手动复制（别忘了bottom: 0）。 - Jared Farrish

我刚刚发布了它。看起来太简单了，所以我在等待一些意外情况发生。 - Jared Farrish

没问题，你可以调整你的答案。就像其他人在这里所做的那样，你甚至可以将它们删除。 - Jonathan Wood

显示剩余3条评论

2个回答

1

如果您希望自定义div的大小，我有一个选项供您选择。

// 将此代码添加到部分，我认为在示例中您没有添加。

<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>

- internals-in

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jared Farrish · Accepted Answer

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

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/