asked on

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;
}

smeghammer

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...

centem

ASKER

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;
}

centem

ASKER

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;}

ASKER CERTIFIED SOLUTION

smeghammer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

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&