0

我有一个固定宽度的侧边栏和流动内容的布局。我的侧边栏中有两个 div，侧边栏有足够的内容到达页面末尾。但是，在某些情况下，它可能会超出此范围。第一个 div（顶部的那个）具有静态内容；第二个是动态菜单。

我想要实现的是让第二个 div 的高度变成这样：

“窗口高度 - 第一个 div 的高度”

在较小的浏览器中，第二个 div 可能会超出页面底部，因此它也需要滚动。

HTML：

<div id="sidebar-container">
    <div id="sidebar-content">
        <div id="sidebar-main">
            STATIC WORDPRESS MENU
        </div>

        <div id="sidebar-menu">
            DYNAMIC MENU. I need this div to change in height 
            according to the browser's height.
        </div><!--sidebar-menu-->       
    </div><!--sidebar-content-->
</div><!--sidebar-container-->

CSS：

#sidebar-container {
background-color: #000;
width: 300px;
float: left;
left: 300px;
margin-left: -300px;
position: relative;
overflow-y: auto;
height: auto
}
4

1 回答 1

1

这是一个 jQuery 解决方案。它完全符合您的要求，即窗口高度 - 第一个 div 的高度。

var maxHeight = 0;
$(window).load(function() {
    maxHeight = $(window).height() - $('#sidebar-main').height();
    $('#sidebar-menu').height(maxHeight);
});

这是它的工作原理。请记住，jsFiddle 会自动添加$(window).load事件，但您可能仍需要在代码中使用它。

于 2013-06-10T07:50:19.537 回答