For my blog page, I'm looking for a way to make a DIV take up 100% of the available width and height.
Using Height: 100% only fills up the visible area of the screen. So, if the resolution is 1920x1080 and the website size is 900x1600... Height:100% will only give me 1080 pixels. I've searched on various platforms before reaching out here but haven't found a solution that works for me.
CSS:
#parent
{
position : absolute;
background: green;
height : 100%;
width : 100%;
}
.child
{
position: relative;
float:left;
background: red;
height : 400px;
width : 500px;
border : 1px solid yellow;
margin: 10px 10px 10px 10px;
}
HTML:
<div id="parent">
<div class="child"> Some text </div>
<div class="child"> Some text </div>
<div class="child"> Some text </div>
<div class="child"> Some text </div>
<div class="child"> Some text </div>
</div>
Check this JSFiddle out: http://jsfiddle.net/acJVw/21/ I want the green area to expand to fill ALL available space, right to the very bottom of the scrollable page. Edit:
EDIT: I need to tweak the question slightly because the solutions are working with the examples provided, but not with a gradient background. Here's an updated JSFiddle with a gradient and min-height: http://jsfiddle.net/acJVw/27/
The gradient stops short of reaching the bottom of the page!