5

Using this example:

http://jsfiddle.net/FhWxh/

HTML:

<div id="container">
    <div id="header">
        <p>Header</p>
    </div>

    <div id="content">
        <p><b>Main content</b></p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
    </div>

    <div id="sidebar">
        <p><b>Sidebar</b></p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
    </div>

    <div id="footer">
        <p>Footer</p>
    </div>
</div>

CSS: 

body {
    font: normal 16px/1.5em helvetica, arial, sans-serif
}
p {
    text-align:center;
}
#container {
    width:960px;
    margin:0px auto;
}
#header {
    text-align:center;
    background: #777;
    color:#fff;
    height:50px;
    padding:5px;
}
#content {
    float:right;
    width:610px;
    text-align:center;
    background:#ccc;
    padding:150px 5px;
}
#sidebar {
    float:left;
    width:330px;
    text-align:center;
    height:300px;
    background:#eee;
    padding:15px 5px;
    overflow:auto;
}
#footer {
    clear:both;
    text-align:center;
    background: #555;
    color:#fff;
    height:50px;
    padding:5px;
}

How do I make the "sidebar" 100% of the height of the user's browser (minus 50 pixels to leave room for the header)?

I believe it's possible to get the user's browser height using javascript and insert it dynamically into the css, but I don't know how to do that.

4

3 に答える 3

8

Try the following:

$('#sidebar').height($(window).height() - 50)
于 2012-07-28T19:20:38.480 に答える
2

Div will resize based on browser size

$(window).on('load resize', function(){
    $('#div').height($(this).height());
    $('#div').width($(this).width());
});
于 2013-10-20T11:20:07.350 に答える
1

jsを使わないようにしていますが、これはあなたが望んでいたような効果ですか？http://jsfiddle.net/FhWxh/4/

もう少し完全なhttp://jsfiddle.net/FhWxh/13/show/ コンテンツ全体のサイズはラッパーによって設定され（960pxに設定）、フッターとヘッダーはこの中の位置に固定され、コンテンツとサイドバーは以前に使用したコンテナクラスで。完璧ではありませんが、お役に立てば幸いです

于 2012-07-28T19:43:47.680 に答える