Often we realise that putting 100% height to main Container does not cover the whole browser height.
HTML is the stack of container where any child element inherit the properties of its parent element unless properties specified explicitly.
now when we give "100%" height to our div it takes 100% height of its parent element.
So,
<html>
<body>
<div class="mainWrapper">This is My Wrapper Div </div>
</body>
</html>
CSS:
.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}
Now here, <body> is the parent element of <div> so <div> will take 100% of <body> height. But since we have not defined any height for <body> , we cannot see any change in the height of div.
Adding couple of more entries in our CSS files may add success to our problem:
html,body{
height:100%;
}
.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}
Putting this CSS can give you 100% browser height to your <div>. Since <html> and <body> are parent elements. We provided them 100% height which says <html> and <body>
elements to take 100% of browser height.
