masterross
New Member
I'm creating a blog page, and I need a DIV to take 100% of all the available width and height.
When I try using \[code\]Height : 100%\[/code\], the DIV only takes what is the visible area. So, if the screen resolution is 1920x1080, and the website is 900x16000 large.... Height:100% gives 1080 only. I've seen a lot of answers here before posting this but haven't managed to get it to work.CSS:\[code\]#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;}\[/code\]HTML:\[code\]<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>?\[/code\]Take a look at this JSFiddle : http://jsfiddle.net/acJVw/21/What I need is that the green area takes ALL the available space, till the very bottom of the (scrollable) page.?