body element not expanding to size of window

Hello Everyone.
I'm trying to get the body element to span the height of the browser window. Below is the html and css. Thank you.

<!DOCTYPE html>
<HTML>
      <HEAD>
            <link rel="stylesheet" type="text/css" href="styles.css" />
      </HEAD>
      <BODY>
      
            <header></header>
            <nav></nav>
                  
      </BODY>
      
</HTML>

//////////////////////////////// CSS /////////////////////////////////////////////

html {
      background: yellow;
}

body{
      width: 80%;
      height: 100%;
      margin: 0 auto;
      background: white;
}

header{
      height: 50px;
      margin-bottom: 1em;
      background: gray;
}

nav{
      height: 25px;
      margin-bottom: 1em;
      background: green;
}
centemAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

smeghammerCommented:
Hi,

You can set the body AND html elements like so:

  <style>
    html{min-height:100%;border:5px solid red;}  
   body{height:100%;border:5px solid red;}
  </style>

Open in new window


You will need to specify the margins etc. to zero as well - they behave differently on FF and IE, but th efull height body works in both. I just added the border for visual impact...
0
centemAuthor Commented:
Here's my updated code. Also the footer will not show the margin-top in order to seperate it from the aside and article tags.

<!DOCTYPE html>
<HTML>
      <HEAD>
            <link rel="stylesheet" type="text/css" href="styles.css" />
      </HEAD>
      <BODY>
      
            <header>HEADER</header>
            <nav>NAVIGATION</nav>
            
            <aside>ASIDE</aside>
            
            <article>ARTICLE</article>
            
            <footer>FOOTER</footer>
            
      </BODY>
      
</HTML>

//////////////// css //////////////////////////////////////////////////////////////////////

html {
      background: yellow;
}

body{
      width: 80%;
      height: 100%;
      margin: 0 auto;
      background: white;
}

header{
      height: 50px;
      margin-bottom: 1em;
      background: gray;
}

nav{
      height: 25px;
      margin-bottom: 1em;
      background: green;
}

aside{
      float: left;
      width: 30%;
      background: blue;
}
      
article{
      float: right;
      width: 60%;
      background: gray;
}

footer{
      background: #cc0000;
      height: 50px;
      clear: both;
      margin-top: 1em;
}
0
centemAuthor Commented:
Thanks for your response smeghammer, but, adding the below did not fix.
   
html{min-height:100%;border:5px solid red;}  
   body{height:100%;border:5px solid red;}
0
smeghammerCommented:
It was a HTML doctype thing - just tried again with your code and HTML 5. Slight mod as below (border again for clarity):

html {height:100%;
      background: yellow;
      border:1px solid red;
}

body{ height:100%;
      width: 80%;
      margin: 0 auto;
      background: white;
      border:1px solid green;
}

Open in new window

try 'height:100%' not min-height.

Cheers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
If you want the body to always be the height of the viewport then you can use the viewport related unit vh.

height:100% refers to content and while you cna get it to fill the screen that way it is not consistent in all circumstances.

height:100vh refers to the height of the viewport... 1 vh is equal to 1/100th of the viewport height. It works in all modern browsers only.

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.