<...">
Geek asks and answers

How to set div height dynamically based on user browser size

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 to make the "sidebar" 100% of the height of the user's browser (minus 50 pixels to leave space for the title)?

I believe it is possible to get the height of a custom browser using javascript and dynamically paste it into css, but I don't know how to do it.

+5
source share
3 answers

Try the following:

$('#sidebar').height($(window).height() - 50)
+7
source

Div will vary depending on browser size

$(window).on('load resize', function(){
    $('#div').height($(this).height());
    $('#div').width($(this).width());
});
+2
source

js, , ? http://jsfiddle.net/FhWxh/4/

a bit more http://jsfiddle.net/FhWxh/13/show/ the entire size of the content is set by the shell (set to 960px), and the footer and header are fixed in this place, and the content and sidebar are in the container class that you used earlier. This is not perfect, but I hope this helps

+1
source

More articles:


All Articles