CSS height 100%

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
wms
Forum Members
Forum Members
Posts: 204
Joined: Mon Feb 13, 2006 7:26 pm

CSS height 100%

Post by wms »

Hi,

Does anyone out there have their pages stretching to the full height of a browser window and not to the height of the text.

I'm using version 0.11.2 on a Windows Server.

Here is my layout stylesheet:
_________________________________________________
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */

html,body {
        margin: 0;
        padding: 0;
        text-align: center;
        background-color: white;
        height: 100%;
    }

    div#page {
        width: 745px;
        margin:  auto;
        padding: 0;
        text-align: left;
        height: 100%;
      }
   

    /* HEADER */
          div#header {
            top: auto;
            left: auto;
            width: 745px;
            height: 209px;
            background: url(/images/Header.jpg);
        }
  /* END HEADER */
   
   
    /* CONTENT */
        div#content {
          top: auto;
          left: auto;
          width: 745px;
          background:  url(/images/Body.gif) repeat-y;
         
        }
       
        /* MAIN */
          div#main {
              width: 505px;
              height:  100%;
              padding-left: 15px;
          }
        /* END MAIN */
    /* END CONTENT */
   
   
    /* FOOTER */
        div#footer {
          top: 100%;
          left: auto;         
          width: 745px;
          height: 23px;
          background: url(/images/Footer.gif);
         
        }
        div#footertext {
          padding-top: 3px;       
          color: white;
          font-size: 0.8em;
          text-align: center;
        }
    /* END FOOTER */

/* END LAYOUT */

    div.headertext {
          position: absolute;         
          top: 181px;
          left:  auto;
          padding-left: 10px;     
          color: white;
          font-size: 0.9em;
        }
      div.email {
          position: absolute;         
          top: 181px;
          padding-left: 640px;
          color: white;
          font-size: 0.8em;
      }

      div.breadcrumbs {
          top: auto;
          left: auto;
          width: 745px;
          height: 20px;
          padding-left: 10px;
          background:  url(/images/Body.gif) repeat-y;
          font-size: 0.8em;
      }
_____________________________________________________

Any help would be great...I've been struggling with this one for weeks.

Thanks,
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: CSS height 100%

Post by kermit »

it's not an easy thing to accomplish while still having cross-browser compatibility.

there's a couple of articles near the top of this search that might point you in the right direction:
http://www.google.com/search?q=css+height+%22100%25%22
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
Post Reply

Return to “Layout and Design (CSS & HTML)”