xProteuSx Posted August 12, 2011 Share Posted August 12, 2011 I am trying to make a website, and I need one of the divs to be 100% of the height of the browser window (inner). So far, I have the following CSS: @charset "utf-8"; /* CSS Document */ html { height: 100%; } body { margin: auto 0; padding: 0; background-image: url(images/background.jpg); background-repeat: repeat; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff; height: 100%; } div.wrapper { width: 100%; height: 100%; } div.content { width: 980px; height: 100%; background-color: #3F0; } The HTML looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="images/icon.gif" /> <title>Home Page</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <center> <div class="content"></div> </center> </div> </body> </html> What I need is for the 'content' div to be 980 pixels wide, and 100% the height of the webpage. I have tried min-height:100%, just in case anyone is wondering. I have also googled this problem, and have found no working solution. Please help! Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted August 12, 2011 Share Posted August 12, 2011 remove <center> from your mark up. press the link in my signature named bad tags and read it. Ones you removed <center> , add the following to anything you want centred. margin:0 auto; for instance: div.content { width: 980px; height: 100%; background-color: #3F0; margin:0 auto; /* added this */ } Quote Link to comment Share on other sites More sharing options...
xProteuSx Posted August 13, 2011 Author Share Posted August 13, 2011 Thanks for your tip on the 'center' tag. Trying to keep up with HTML, CSS, XML, PHP, MySQL, JavaScript, and ActionScript so I fall behind the times here and there Any tips regarding making a div 100% of the page height? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted August 13, 2011 Share Posted August 13, 2011 Thanks for your tip on the 'center' tag. Trying to keep up with HTML, CSS, XML, PHP, MySQL, JavaScript, and ActionScript so I fall behind the times here and there Any tips regarding making a div 100% of the page height? the code i gave does just that. in general, you give body and html a height of 100% That will be the reference. Any block element that has a heigth of 100% (and is not inside a <center> tag) will have the height of the window. Keep in mind though. The window size is the reference so if you placce 2 divs above each other and you both give them 100% height you will end up with 200%. Mostly the 100% is only used for the outer wrapper and instead of giving it a height you give it a min-height. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.