3

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

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

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

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

4

2 回答 2

7

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

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/

于 2013-03-27T01:40:17.590 回答
1

如果您希望您的 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>
于 2013-03-27T01:34:56.580 回答