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