# CSS: 100% Height Issue

**URL:** https://forum.kirupa.com/t/css-100-height-issue/246124
**Category:** web dev
**Created:** [December 7, 2007, 8:51am UTC](https://forum.kirupa.com/t/css-100-height-issue/246124 "2007-12-07T08:51:01Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![unclejemima](https://avatars.discourse-cdn.com/v4/letter/u/b5e925/32.png) [@unclejemima](https://forum.kirupa.com/u/unclejemima)
#### Post date: [December 7, 2007, 8:51am UTC](https://forum.kirupa.com/t/css-100-height-issue/246124/1 "2007-12-07T08:51:01Z")

</div>

Okay, so I’ve created a website mainly with CSS and now I’m trying to make the height stretch to fill 100% of the viewing area… not that complicated but I don’t get why it’s not working. Please note, I understand that my code is probably not in the simplest form, but it works and is compatible… so I really just want the height to work. Any help is appreciated.

```auto
html,body {
         background-color: #515151;
         background-image: url(images/bg.jpg);
         background-repeat:repeat-x;
         text-align: center;
         margin-left: 0px;
         margin-top: 0px;
         margin-right: 0px;
         margin-bottom: 0px;
         height: 100%;
         }
        p {font:14px Arial, Helvetica, sans-serif;}
         .head {font: italic 22px "Arial Black"; text-decoration:none; color:white; margin-top: 0px;}
        a.nav:link {text-decoration: none; color: white;}
         a.nav:visited {text-decoration: none; color: white;}
         a.nav:active {text-decoration: none; color: white;}
         a.nav:hover {text-decoration: none; color: black;}
        a.nav2:link {text-decoration: none; color: black;}
         a.nav2:visited {text-decoration: none; color: black;}
         a.nav2:active {text-decoration: none; color: black;}
         a.nav2:hover {text-decoration: none; color: black;}
        #container {
         margin: 0 auto;
         width: 766px;
         height:auto;
         height: 100%;
         min-height: 100%;
         text-align: left;
         }
         #header1 {
         position: relative;
         width: 766px;
         height: 52px;
         background-color: #aaaaaa;
         background-image: url(images/home_header1.jpg);
         }
         #header2 {
         position: relative;
         width: 766px;
         height: 228px;
         background-color: #aaaaaa;
         background-image: url(images/home_header2.jpg);
         }
        /* NAVIGATION */
        #navigation {
         position: relative;
         width: 766px;
         height: 55px;
         background-color: #aaaaaa;
         background-image: url(images/home_navbar.jpg);
         font:bold 18px Arial, Helvetica, sans-serif; text-decoration:none;
         }
         #navONE {
         float:left;
         margin-left: 210px;
         margin-top: 29px;
         width: 100px;
         text-align:center;
         line-height:24px;
         }
         #navTWO {
         float:left;
         margin-left: 5px;
         margin-top: 29px;
         width: 100px;
         text-align:center;
         line-height:24px;
         }
        /* CONTENT */
        #content {
         padding-top: 22px;
         width: 766px;
         background-color: #aaaaaa;
         background-image: url(images/home_content.jpg);
         }
         #main-content {
         margin-left: 50px;
         width: 666px;
         font-family:Arial, Helvetica, sans-serif;
         font-size:smaller;
         }

```

---

_[View the full topic](https://forum.kirupa.com/t/css-100-height-issue/246124)._