CSS: Expand parent beyond viewport?

S

soundcompanies

Perch
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>
--------------------------------------------------------------------------------


This has been driving me crazy for days! Hopefully some of you pros can sort this out for me.

Thanks,

Brent
 
Are you using a DIV because you want to hide it at some point? If not, try using SPAN or an IFRAME. Asp.net's LABEL component is actually a SPAN... cool to use it for that purpose sometimes with no text in it...
-Dave
 
Using DIV for compliance with CSS standards. Span won't work.

I'm redesigning one of my sites so that it is all CSS. This will allow me to easily 'skin' my sites based on user preference.

I've found a few hundred threads on the subject, but no real solution. Some good attempts, but nothing definitive.

The problem is that CSS needs to inherit a height value from somewhere. My 'page' DIV inherits from body who inherits from html. Setting the body and html to 100% should fix it. However, html inherits from the users viewport size.

So far, the only way to get close to the desired effect is to set the 'page' height to something that is guaranteed to exceed the content height. This is why we come accross sites that have a lot of emply space at the bottom of the canvas. I can set height it for each page, but that would defeat the purpose of CSS.

If I must, I will give each page it's own height. I'm using CF so I don't use many pages. However, that means I have to limit the records displayed by any query to ensure the results don't 'fall off the canvas.'
 
You must log in or register to reply here.
Back
Top