...

View Full Version : Make element fill height of browser window



ben1390
06-08-2012, 12:05 PM
Hi All,

I have this CSS code:


#header {
display: inline block;
background: url(../header.jpg) repeat-x;
height: 110px;
text-align: center;
}

#main {
background: #FFFFFF;
height: 100%;
}

I am trying to get the main element to fill the entire height of the browser window (less the header height of course). I would of thought height: 100% would work, but it doesn't.

Can anyone help me please?

felgall
06-08-2012, 12:13 PM
Setting #main to 100% height will make it 100% of the height of its container - if that container is less than the height of the browser then it still will not fill the entire height.

You'd need to start with 100% height on the html and body if you want to make anything in the page that high.

ben1390
06-08-2012, 12:24 PM
Hi felgall,

Thank you for your fast reply and it has worked perfectly, however now that I wish to add a footer, a scroll bar is now appearing even though I have not added any content to #main yet. What would I need to do to prevent this from happening?

Thank you for all your help

abduraooft
06-08-2012, 01:18 PM
Please post your complete HTML+CSS

ben1390
06-08-2012, 01:53 PM
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css (http://www.codingforums.com/view-source:http://www.wbb-img.com/css/style.css)" type="text/css"> <script type="text/javascript" src="js/ga.js (http://www.codingforums.com/view-source:http://www.wbb-img.com/js/ga.js)"></script> </head> <body> <div id="container"> <div id="logo"></div> <div id="header"><h1>Header</h1></div> <div id="main"> <form action="upload.php (http://www.codingforums.com/view-source:http://www.wbb-img.com/upload.php)" method="post" enctype="multipart/form-data"> <p>Select file <input name="file" type="file" id="file" /></p> <p><input type="submit" name="Submit" value="Upload" /></p> </form> </div> </div> <div id="advert">Google Adsense Code</div> <div id="footer">Footer Text</div> </body> </html>


@charset "UTF-8"; /* CSS Document */ * { margin: 0; padding: 0; } html, body { background: none repeat scroll 0 0 #ECF0F6; color: #000000; font: 12px Verdana,Arial,Helvetica,sans-serif; margin: 6px; padding: 0; height: 100%; } h1 { color: #839FBC; font: bold 20px/100% "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; text-decoration: none; text-align: center; vertical-align: middle; } #container { background: #FFFFFF; border: 1px solid #98AAB1; height: 100%; } #logo { float: left; background: url(../logo.jpg); width: 290px; height: 110px; } #header { display: inline block; background: url(../header.jpg) repeat-x; height: 110px; text-align: center; vertical-align: middle; } #main { background: #FFFFFF; } #advert { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #98AAB1; margin-top: 5px; text-align: center; padding: 3px; } #footer { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #98AAB1; margin-top: 5px; font-size: 10px; text-align: center; padding: 3px; }

abduraooft
06-08-2012, 02:01 PM
Try
#container { background: #FFFFFF;
min-height: 100%;
margin-bottom:-60px;

ben1390
06-08-2012, 02:27 PM
Thanks for your reply, but that doesn't seem to have solved it

ben1390
06-12-2012, 11:42 AM
bump :)

Richter
06-12-2012, 12:52 PM
Hi ben1390,
I think you little misunderstand about set a dimension as percent, your html and body's total height is 100% then you set container's height is 100 percent that mean your page is full but you still add advert and footer into page, it's obviously they will overflow your page.
You need to add advert and footer(everything else you put in the same level of container) in to your calculate too like container 80%, advert 10% and footer 10%, just set it 100% doesn't mean they will auto set their height by them self, and you have to set overflow(hidden or auto) in css too if you not, it will be same as they are now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum