Page 1 of 1

CSS height 100%

Posted: Tue Mar 07, 2006 7:53 pm
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,

Re: CSS height 100%

Posted: Wed Mar 08, 2006 3:03 am
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