Question

我有一个固定宽度侧边栏和流畅内容的布局。我的侧边栏中有两个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
}

Answer 1

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

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

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

全高侧边栏，带有2个叠加的div - 一个需要具有动态高度

1 个答案: