I have one horizontally div on the top of my page with a height of 50px.
And now I want to put another div right below it which will fill the rest of entire page (should work with any kind of resolution).
Does anyone know how to do this only with CSS?
I'd appreciate any help. Thanks!
This is an example of a layout that is somewhat problematic with "pure" CSS but trivial with tables.
Firstly there is no way of expressing (ignoring CSS expressions, which you tend to want to avoid) "rest of the page" or "100% minus 50px" so the general solution to this problem is.
Create a container that is 100% height;
Put the header at height 50px;
The content simply takes up the rest of the space. Any styling is applied to the container not the content.
So:
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
with:
html, body. #container { height: 100%; }
#container { height: 100%; min-height: 100%; }
#header { height: 50px; }
It gets trickier if you want a footer. That is typically positioned absolutely at the bottom and padding is used on the container so nothing appears under it.
Although this is not stacking the div's it is very simple solution. Make a div that is 100% height and then place a div inside that is 50px in height.
<body style="height: 100%; width: 100%;">
<div style="height: 100%; width: 100%;">
<div style="height: 50px; width: 100%;">Header</div>
<!--Rest of Content-->
</div>
</body>
There are ways to do this. Here is an example using absolute positioning and a wrapper. Obviously ignore the colors-- they're just there so you can see what's going on.
<body style="margin: 0;height: 100%; background-color: yellow;">
<div style="background-color: green; height: 50px">top stuff</div>
<div style="position: absolute; top: 50px; bottom: 0; left:0; right: 0; background-color: blue">main stuff</div>
</body>