0

固定幅のサイドバーと流動的なコンテンツのレイアウトがあります。サイドバー内に 2 つの div があり、サイドバーにはページの最後に到達するのに十分なコンテンツがあります。ただし、それを超える場合もあります。最初の div (一番上にあるもの) には静的コンテンツがあります。2 つ目は動的メニューです。

私が達成したいのは、2番目のdivの高さを次のようにすることです:

「ウィンドウの高さ - 最初の div の高さ」

小さいブラウザーでは、2 番目の 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 に答える