#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    7
    Rep Power
    0

    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. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    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&hellip; 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.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    7
    Rep Power
    0
    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
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    I did comment out your "centering layer" however. Is there any real need for that layer?
    No. I originally created a centered container to reside in the #page. Over the course of 7 hrs of football, I realized it was redundant, and simply sized and centered the #page. It seems I should have cleaned up after myself.

    cheers,

    gary

IMN logo majestic logo threadwatch logo seochat tools logo