|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
January 3rd, 2004, 01:43 PM
|
|||
|
|||
|
CSS: Expand parent beyond viewport?
I've been searching for a few days, but I haven't found a solution to my problem. How do I get my parent DIV to expand to contain all of my content beyond the viewport?
CSS: Code:
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
.page {
background-color: #dddddd;
margin-left: -390px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-top-color: #9CB0C0;
border-right-color: #9CB0C0;
border-bottom-color: #9CB0C0;
border-left-color: #9CB0C0;
position: absolute;
height: 100%;
min-height: 100%;
width: 780px;
left: 50%;
top: 0;
}
.header {
position: absolute;
height: 158px;
width: 764px;
background-color: #FFFFFF;
left: 7px;
top: 0px;
}
.content {
position: absolute;
left: 7px;
top: 159px;
background-color: #9CB0C0;
height: 821px;
width: 764px;
margin-bottom: 34px;
}
.footer {
background-color: #415569;
height: 34px;
width: 764px;
left: 7px;
bottom: 0px;
}
And the HTML: Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/test.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="lPage" style="position:absolute; z-index:1" class="page">
<div id="lContent" style="position:absolute; z-index:2;" class="content"></div>
<div id="lHeader" style="position:absolute; z-index:1" class="header"></div>
<div id="lfooter" style="position:absolute; z-index:3" class="footer"></div>
</div>
</body>
</html>
I've searched through a few of the threads here, but haven't been able to find an answer either. Thanks, Brent
|
|
#2
January 4th, 2004, 03:51 AM
|
||||
|
||||
|
I started playing with your code while watching a couple of playoff games. I may have misplaced your question. The reworked code can be found at http://garyblue.port5.com/webdev/expandbox.html and http://garyblue.port5.com/webdev/expandbox2.html
The first uses your 821px content height. The content box runs well past the bottom of the page in an 800x600 window. The second example uses the default auto height, which will expand as content expands. If the content does not reach the bottom of the page, the footer div will still sit at the bottom. I also removed the <?xml… from the top line as that causes IE to enter quirks mode. These pages validate as xhtml 1.0 strict. cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#3
January 4th, 2004, 02:23 PM
|
|||
|
|||
|
Gary, thanks for the answer. I followed your lead and then added a few embeded layers to see how the content would follow. It worked nicely. I did comment out your "centering layer" however. Is there any real need for that layer?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
}
html, body, #page {
width: 100%;
min-height: 100%;
height: 100%; /*this is an IE5+/Win hack */
}
html>body, html>body #page {
height: auto; /*this corrects the hack for good UAs */
}
body {
margin: 0px;
background-color: #654;
color: #333;
}
#page {
position: absolute;
width: 780px;
left: 50%;
margin-left: -390px;
background-color: #FF9900;
top: 0px;
}
#content {
background-color: #FF6666;
color: #654;
margin-bottom: 34px;
width: 764px;
margin-left: 8px;
}
#header {
height: 158px;
background-color: #89a;
color: #765;
width: 764px;
}
#logo {
background-color: #415569;
position: absolute;
height: 38px;
width: 764px;
top: 0px;
}
#flashBanner {
background-color: #FFFFFF;
position: absolute;
height: 100px;
width: 764px;
top: 39px;
}
#mainNav {
background-color: #9cb0c0;
position: absolute;
height: 15px;
width: 764px;
top: 140px;
}
#topContent {
height: 290px;
width: 764px;
left: 0px;
top: 159px;
background-color: #99cc66;
}
#midContent {
background-color: #CCCCCC;
height: 220px;
width: 764px;
left: 0px;
top: 450px;
}
#botContent {
height: 300px;
width: 764px;
left: 0px;
top: 671px;
background-color: #FFFFFF;
}
#footer {
position: absolute;
background-color: #457;
color: #ba8;
height: 34px;
bottom: 0px;
width:764px;
left: 50%;
margin-left: -382px;
}
/*]]>*/
</style>
</head>
<body>
<div id="page">
<!-- <div id="centeringbox"> -->
<div id="content">
<div id="header">
<div id="logo">
<p>This is the logo</p>
</div>
<div id="flashBanner">
<p>This is the flashBanner</p>
</div>
<div id="mainNav">
<p>This is the mainNav</p>
</div>
</div>
<div id="topContent">
<p>This is the topContent</p>
</div>
<div id="midContent">
<p>This is the midContent</p>
</div>
<div id="botContent">
<p>This is the botContent</p>
</div>
</div>
<!-- </div> -->
<div id="footer">
<p>This is the footer</p>
</div>
</div>
</body>
</html>
Also, thanks for the 'title' tip in the other thread. Brent
|
|
#4
January 4th, 2004, 05:47 PM
|
||||
|
||||
|
Quote:
cheers, gary
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS: Expand parent beyond viewport? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
