CODEWITHSUNDEEP
htmlcss
user3189826
user3189826

Reputation: 31

100% height of browser

How do I get my 100% height divs to go full height of the browser when I have to scroll down. When I load my page the divs fill the browser window but when I have to scroll the 100% height divs do not go any further, leaving a white space below.

HTML 

<header>
</header>

<section id="sidebar">
</section>

<section id="main-container">
</section>

</div>

CSS

html, body { width:100%;height:100%; overflow:auto;}

body{
margin:0;
min-height:100%; 
height:100%; 
width:100%;
padding:0;
font-family: 'Open Sans', sans-serif;
color:#484848;
overflow-y:scroll;
}

#wrapper{
width:100%;
height:100%;
min-height:100%;
position:relative;
margin:0;
}

header{
width:100%;
height:10%;
min-height:80px;
position:relative;
}

#sidebar{
display: inline-block;
width:20%;
min-width:170px;
height:90%;
min-height:90%;
position:relative;
}

#main-container{
display: inline-block;
margin-left:1px;
width:78%;
height:90%;
margin-right:0.5%;
vertical-align:top;
position:relative;
}

I've so far tried everything I can think of.

Upvotes: 0

Views: 100

Answers (2)

alchuang
alchuang

Reputation: 3561

The easiest way is simply using CSS:

height: 100vh;

Where 'vh' stands as vertical height of the browser window. This makes it responsive to resizing of brower and mobile devices.

Upvotes: 1

Spanky
Spanky

Reputation: 709

Set the height: 100% and remove min-height setting from #wrapper. Apply min-height: 100% to the divs that you would like to fill the browser.

Similar example here

#wrapper {
    width:100%;
    height:100%;
    position:relative;
    margin:0;
}

Hope this helps

Upvotes: 1

Related Questions