如何设置固定位置元素高度到达浏览器窗口的底部？ [英] How to Set Fixed-Position Element Height to Reach Bottom of Browser Window?

问题描述

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

I have a page with a header at the top, a sidebar on the left, and a main content area on the right. A simplified version can be seen at http://jsbin.com/iqibew/3.

侧边栏具有样式 position：fixed ，因此它不会与页面的其余部分滚动。这个工作，但我也需要侧边栏本身来滚动，如果它的内容太长，不适合。

The sidebar has the styling position: fixed so that it does not scroll with the rest of the page. This works but I also need the sidebar itself to scroll if it's content is too long to fit.

这只有可能的，如果我可以设置正确的高度的侧边栏。但我找不到任何方式来设置这个高度。 100％已关闭，但太高了，因为侧边栏从标题下方开始。

This is only possible if I can set the correct height for the sidebar. But I can't find any way to set this height. 100% is close but it's too tall because the sidebar starts below the header.

没有办法解决这个问题。我打开一个CSS或JavaScript / jQuery解决方案。

Is there no way to address this. I'm open to either a CSS or JavaScript/jQuery solution.

推荐答案

我想我会发布，工作：

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/

这篇关于如何设置固定位置元素高度到达浏览器窗口的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！