Question

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

侧边栏具有样式position: fixed，因此它不会与页面的其余部分一起滚动。这有效，但如果内容太长而无法适应，我还需要侧边栏本身滚动。

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

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

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

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

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

2 个答案: