CODEWITHSUNDEEP
htmlcssdomheight
Erik
Erik

Reputation: 5791

Make Div Height 100% of Screen

I have been reading all the 100% div height discussions and I can't find a simple solution. How can I make my div take up all of the vertical height of the screen?

Here is my code:

css

#mother {
    width:   100%;  
    margin: 0 auto; 
    z-index: 1;
}
#stripe_wrap {
    width: 1053px;
    min-height: 500px;
    margin: 0 auto;
    background: lime; 
}
#stripe1 {
    width: 39px;
    min-height: 500px;
    margin: 0px 0px 0px 0px;
    background: #000;
    float: left;
}
#stripe2 {
    width: 39px;
    min-height: 500px;
    margin: 0px 0px 0px 0px; 
    background:#000;
    float: right;
}

html

<div id="mother" style="overflow-x: hidden;">
    <div id="stripe_wrap">

        <div id="stripe1"></div>
        <div id="stripe2"></div>

    </div>
</div>

Upvotes: 1

Views: 917

Answers (3)

sarvesh kushwaha
sarvesh kushwaha

Reputation: 342

Try to set height:100% for your <body> and <html>, too.
If there is nothing except this div on your page, 100% height will be 0px without these settings.

Upvotes: 1

Teekin
Teekin

Reputation: 13279

You have to make the <body> tag of the height 100% as well, otherwise it is vertically truncated to fit the content.

Also make sure to put the margin of <body> to 0px, because otherwise it will become 100%_of_visible_area + margin, resulting in a vertical scroll bar.

Upvotes: 4

Gazler
Gazler

Reputation: 84150

html, body {padding: 0px; margin: 0px; height: 100%;}

http://jsfiddle.net/kEv8F/ - my version.

http://jsfiddle.net/kEv8F/ - your version.

Is that what you meant?

Upvotes: 2

Related Questions