CODEWITHSUNDEEP
htmlcss
nikdeapen
nikdeapen

Reputation: 1601

How can I make a div expand to the height of the page?

I am trying to make the blue div expand to the height of the page but nothing seems to work: JSFiddle

css:

/* Reset */
html,body {
    width:100%;
    height:100%;
    margin:0px;
}

/* General */
.clear {
    clear:both;
}

/* Page Layout */
#page {
    margin-left:250px;
    min-height:100%;
    background-color:green;
}

#main {
    float:right;
    width:100%;
    background-color:blue;
    height:100%;
}

#sidebar {
    float:left;
    width:250px;
    margin-left:-250px;
    background-color:#222629;
    min-height:100%;
}

and html:

<div id="page">
    <div id="main">
        main
    </div>
    <div id="sidebar">
        <ul>
           <li>something</li>
           ...
           <li>something</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

The same needs to hold true for the sidebar if the page is much longer than the sidebar content.

Upvotes: 0

Views: 130

Answers (8)

Muhammad Waqas
Muhammad Waqas

Reputation: 64

give height in px or give this class (margin:5 or 10px;)

Upvotes: 0

A.Sharma
A.Sharma

Reputation: 2799

function resize () {
    var x = $('#page').height();
    $('#main').css('height',x+'px');
}

$(document).ready (function(){
    resize();
})

$(window).resize(function(){ 
    resize();
})

Fiddle

Upvotes: 0

Ashwani
Ashwani

Reputation: 303

use class expand-panel on both div sidebar and menu.
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
.clear {
   clear: both;
}
#page {
    display: table;
    width: 100%;
}
.expand-panel {
    display: table-cell;
    width: 50%;
}
#main {
    background-color: blue;
}
#sidebar {
    background-color: #00FF00;
}

Upvotes: 0

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

Your CSS is correct, but one mistake in your css is, there are lot more content in sidebar which is increasing height of that sidebar. Just put overflow:auto or overflow-y:auto; to add a scrollbar to sidebar, which will give you expected result.

Here is complete CSS

/* Reset */
html,body {
    width:100%;
    height:100%;
    margin:0px;
}

/* General */
.clear {
    clear:both;
}

/* Page Layout */
#page {
    margin-left:250px;
    height:100%;
    background-color:green;
}

#main {
    float:right;
    width:100%;
    background-color:blue;
    height:100%;
    overflow:scroll;
}

#sidebar {
    float:left;
    width:250px;
    margin-left:-250px;
    background-color:#222629;
    max-height:100%;
    overflow:scroll;
}

Here is Fiddle.enter link description here

My suggestion is, don't use vm as it doesn't support some browsers and partially support to some. Here is support map

Upvotes: 0

Target
Target

Reputation: 199

/* Reset */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* General */
.clear {
    clear: both;
}

/* Page Layout */
#page {

    display: table;
    width: 100%;
}

#main {
    width: 50%;
    background-color: blue;

    display: table-cell;
}

#sidebar {
     background-color: #00FF00;
    display: table-cell;
    background-color: #222629;

}

updated link here

Upvotes: 0

Thomas Andre&#232; Wang
Thomas Andre&#232; Wang

Reputation: 3429

Add this to the bottom of the fiddle, I think its what you want.

#main {
    height: 100vh;
}

https://jsfiddle.net/ac1p22r4/

here it is with some extra touchup https://jsfiddle.net/ssj3xtr7/

Upvotes: 1

Sahil
Sahil

Reputation: 3358

Just change the height attribute's value of #main and #sidebar like this:

#main, #sidebar {
   height: 100vh;
}

This stretches the height of the div to the page's height. Hope this solves your problem.

Upvotes: 0

ketan
ketan

Reputation: 19341

Because div doesn't contain anything so it will not expanding.

You can give position:fixed to make blue div to expand to height of page.

#main {
    background-color: blue;
    float: right;
    height: 100%;
    position: fixed;
    width: 100%;
}

Check: https://jsfiddle.net/qyt83gow/1/

Another option is give min-height to that div.

Upvotes: 0

Related Questions