Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    61
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Make element fill height of browser window

    Hi All,

    I have this CSS code:

    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?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    ben1390 (06-08-2012)

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    61
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please post your complete HTML+CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    61
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Code:
    <!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" type="text/css"> <script type="text/javascript" src="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" 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>
    Code:
    @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; }

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #container {     background: #FFFFFF; 	    
    	min-height: 100%; 
    	margin-bottom:-60px;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Nov 2009
    Posts
    61
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks for your reply, but that doesn't seem to have solved it

  • #8
    New Coder
    Join Date
    Nov 2009
    Posts
    61
    Thanks
    15
    Thanked 0 Times in 0 Posts
    bump

  • #9
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •