[CSS] div height not stretching

Discussion in 'Web Design & Coding' started by ZeroHour, Aug 16, 2004.

  1. ZeroHour

    ZeroHour ho3 ho3 ho3

    Messages:
    1,118
    Location:
    Scotland
    Hi
    I seem to be unable to get my div cell to stretch to the bottom of the page. If you look at the screenie I posted it should show you what happens.
    anyone got any ideas?

    Cheers
     

    Attached Files:

  2. Glaanieboy

    Glaanieboy Moderator

    Messages:
    2,626
    Location:
    The Netherlands
    Link? Code? We can't help you by guessing what code problem you have ;0)
     
  3. ZeroHour

    ZeroHour ho3 ho3 ho3

    Messages:
    1,118
    Location:
    Scotland
    LOL
    Sorry.
    Here is my CSS
    Code:
    .clearfix:after {
      	content: "."; 
      	display: block; 
      	height: 0; 
      	clear: both; 
      	visibility: hidden;
      }
      
      /* Hides from IE-mac \*/
      * html .clearfix {height: 1%;}
      /* End hide from IE-mac */
      .frame {
      	text-align: left;
      	width: 780px;
      	background-color: #F4E8C7;
      	margin-right: auto;
      	margin-left: auto;
      	padding: 0px;
      }
      .header {
      	background-color: #000084;
      	text-align: left;
      	height: auto;
      	padding: 0px;
      	width: 780px;
      }
      .footer {
      	font-family: Verdana, Arial, Helvetica, sans-serif;
      	font-size: 12px;
      	background-color: #FFFFFF;
      	text-align: left;
      	height: auto;
      	padding: 0px;
      	width: 780px;
      	border-top-width: 1px;
      	border-top-style: solid;
      	border-top-color: #000000;
      }
      .menu_bar {
      	text-decoration: none;
      	background-color: #FFFFFF;
      	height: 17px;
      	padding: 0px;
      	text-align: left;
      	width: auto;
      }
      .status {
      	font-family: Verdana, Arial, Helvetica, sans-serif;
      	font-size:10px;
      	text-decoration: none;
      	background-color: #FFFFFF;
      	height: 17px;
      	padding: 0px;
      	text-align: center;
      	width: auto;
      	border-bottom-width: 1px;
      	border-bottom-style: solid;
      	border-bottom-color: #000000;
      }
      div.clearer {
      	clear: left;
      	line-height: 0;
      	height: 0;
      }
      .center_content_bar {
      	padding: 0px 0px 0px;
      	float: left;
      	width: 580px;
      	background-color: #FFFFFF;
      	border-right-width: 1px;
      	border-left-width: 1px;
      	border-right-style: solid;
      	border-left-style: solid;
      	border-right-color: #000000;
      	border-left-color: #000000;
      	border-top-width: 1px;
      	border-top-style: solid;
      	border-top-color: #000000;
      }
      .center_content_bar .departments {
      	font-family: Verdana, Arial, Helvetica, sans-serif;
      	font-size: 12px;
      	text-decoration: none;
      	float: left;
      	height: auto;
      	width: 100%;
      	padding-top: 5px;
      	padding-right: 0px;
      	padding-bottom: 0px;
      	padding-left: 0px;
      	background-image: url(../grey.gif);
      	background-repeat: repeat-x;
      }
      .left_content_bar {
      	padding: 0px;
      	float: left;
      	width: 198px;
      	background-color: #F4E8C7;
      	height: 100%;
      	border-top-width: 1px;
      	border-top-style: solid;
      	border-top-color: #000000;
      }
      .left_content_bar .departments {
      	font-family: Verdana, Arial, Helvetica, sans-serif;
      	font-size: 12px;
      	text-decoration: none;
      	float: left;
      	height: auto;
      	width: 100%;
      	padding-top: 5px;
      	padding-right: 0px;
      	padding-bottom: 0px;
      	padding-left: 0px;
      	background-image: url(../grey.gif);
      	background-repeat: repeat-x;
      }
      
    And heres the HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     <html>
     <head>
     <title><? echo $title ?></title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <link href="/css/layout.css" rel="stylesheet" type="text/css">
     <style type="text/css">
     <!--
     body,td,th {
     	color: #000000;
     }
     body {
     	background-color: #000084;
     	margin-left: 0px;
     	margin-top: 0px;
     	margin-right: 0px;
     	margin-bottom: 0px;
     }
     a:link {
     	color: #000000;
     	text-decoration: none;
     }
     a:visited {
     	text-decoration: none;
     	color: #000000;
     }
     a:hover {
     	text-decoration: underline;
     	color: #000000;
     }
     a:active {
     	text-decoration: none;
     	color: #000000;
     }
     -->
     </style>
     </head>
     <body> 
     <!-- DHTML Menu Builder Loader Code START --> 
     <div id=DMBRI style="position:absolute;"> <img src="/menu/dmb_i.gif" name=DMBImgFiles width="1" height="1" border="0" alt=""> <img src="/menu/dmb_m.gif" name=DMBJSCode width="1" height="1" border="0" alt=""> </div> 
     <script language="JavaScript" type="text/javascript">
     var rimPath=null;var rjsPath=null;var rPath2Root=null;function InitRelCode(){var iImg;var jImg;var tObj;if(!document.layers){iImg=document.images['DMBImgFiles'];jImg=document.images['DMBJSCode'];tObj=jImg;}else{tObj=document.layers['DMBRI'];if(tObj){iImg=tObj.document.images['DMBImgFiles'];jImg=tObj.document.images['DMBJSCode'];}}if(!tObj){window.setTimeout("InitRelCode()",700);return false;}rimPath=_gp(iImg.src);rjsPath=_gp(jImg.src);rPath2Root=rjsPath+"../";return true;}function _purl(u){return xrep(xrep(u,"%%REP%%",rPath2Root),"\\","/");}function _fip(img){if(img.src.indexOf("%%REL%%")!=-1) img.src=rimPath+img.src.split("%%REL%%")[1];return img.src;}function _gp(p){return p.substr(0,p.lastIndexOf("/")+1);}function xrep(s,f,n){if(s) s=s.split(f).join(n);return s;}InitRelCode();
     </script> 
     <script language="JavaScript" type="text/javascript">
     function LoadMenus() {if(!rjsPath){window.setTimeout("LoadMenus()", 10);return false;}var navVer = navigator.appVersion;
     if(navVer.substr(0,3) >= 4)
     if((navigator.appName=="Netscape") && (parseInt(navigator.appVersion)==4)) {
     ;} else {
     document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'ieintmenu.js"><\/script\>');
     }return true;}LoadMenus();</script> 
     <!-- DHTML Menu Builder Loader Code END --> 
     <div class="frame"> 
       <div class="header"><a href="/index.php"?><img src="/images/shieldwhite.gif" alt="" border="0"></a><img src="/images/curvewhite.gif" alt=""><img src="/images/head.gif" alt=""></div> 
       <div class="menu_bar"><img src="/images/spacer.gif" name="menu" width="1" height="1" id="menu"></div>
       <div class="status"><div id="liveclock"></div>
     	<script language="JavaScript" type="text/javascript">
     	<!--
     setuplayer();
     //-->
     </script></div>
       <div class="left_content_bar"> 
     	<div class="departments"><strong><br><? 
     	 include "system\menubuilder.php";?>
     	  </strong>
     	</div> 
       </div> 
       <div class="center_content_bar"> 
     	<div class="departments"> 
     <? echo $content ?> <br>
     echo '<div align="right"><a href="print/"><img src=http://newintranet/images/print.gif border=0></a> <a href="print/">Print this</a>&nbsp;&nbsp;</div>';
      </div> 
       </div> 
       <div class="footer"> <strong>HELP: </strong> 
     	<?
        include "system/helpsys.php" ?> 
       </div> 
       <div class="clearer">&nbsp;</div> 
     </div> 
     </body>
     </html>
     
  4. LordOfLA

    LordOfLA Godlike!

    Messages:
    7,027
    Location:
    Maidenhead, Berkshire, UK
    put this in the css:

    html, body { height: 100%; min-height:100%;}

    also put the attribute min-height: 100%; under the hieght:100% you already have

    Be happy