# DIV height 100%



## Webgau (28. Juni 2009)

Servus,
ich weiß, dass es ein leidiges Thema ist und hier schon tausendmal besprochen wurde…. Ich erstelle gerade für Joomla 1.5 ein Template und möchte die div container auf 100% höhe haben, eigentlich nur das Menü links.
Hier das Template: Demo Template
 Ich habe bereits folgendes ohne Erfolg ausprobiert:


```
html, body
{
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%; /* Mindesthöhe für moderne Browser */
	height:auto !important; /* Important Regel für moderne Browser */
	height:100%; /* Mindesthöhe für den IE */ 
}

#wrap
{
	margin: 0 auto;
	text-align: left;
	border-left: #CCCCCC 1px solid;
	border-right: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	background: #FFFFFF;
	height: 100%;
}

#left
{
	width: 25%;
	float: left;
	overflow: hidden;
	background: url(../images/uri.gif) right bottom repeat-x #efefef;
	height: 100%;
}
```

hat jemand ne Lösung? Danke im Vorraus!

Grüße Mirko


----------



## Maik (28. Juni 2009)

Hi,

du hast die (Mindest)Höhenangaben für html,body und *#wrap* vertauscht.

Desweiteren kann das Nachfolgeelement *#left* keine "saubere" 100%-Höhe im Viewport einnehmen, ohne weitere Darstellungsfehler im Layout zu produzieren, weshalb sein angedachtes Hintergrundbild im übergeordneten Block *#wrap* verwendet werden müsste, sofern es einen Bestandteil des "100%-Höhen-Layouts" darstellt.

mfg Maik


----------



## Webgau (28. Juni 2009)

vielen dank ersteinmal, aber leider geht es trotzdem net. Hier mal mein CSS Code

```
@charset "utf-8";
/* CSS Document */
html
{
	margin: 0;
	padding: 0;
	height: 100%;
}

body 
{
	margin: 0;
	padding: 0;
	height: 100%;
	line-height: 1.2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	color: #666666;
	text-align: center;
	background: url(../images/bg.png) repeat-x;
}

.inside
{
	padding: 5px;
}

.clear 
{
	clear: both;
	line-height: 0;
	font-size: 0;
	height: 0;
}

.tooltop
{
	width: 100%;
	background: url(../images/bg_tool.gif) repeat-x;
	overflow: hidden;
	height: 30px;
	text-align: left;
	border-bottom: 1px solid #CCCCCC;
	line-height: 1.5em;
}

#time
{
	float:left;
	font-size: 80%;
	display:block;
	overflow: hidden;
}

#fontsize
{
	float:right;
	overflow: hidden;
	display: block;
	padding: 1px 5px;
}

#syndicate
{
	float: right;
	overflow: hidden;
	display: block;
	width: 17px;
	height: 17px;
	padding: 1px 5px;
}

#syndicate a
{
	text-decoration: none;
	border: none;
}

#syndicate img
{
	text-decoration: none;
	border: none;
}

#fontsize a, #fontsize img
{
	border: 0 none;
}

#search
{
	float: right;
	padding: 0 5px;
	overflow: hidden;
}

#search .inputbox
{
	width: 120px;
	height: 15px;
	font-size: 12px;
	border: #CCCCCC solid 1px;
	background: #FFFFFF url(../images/search.gif) no-repeat left;
	padding-left: 17px;
}

#wrap
{
	margin: 0 auto;
	text-align: left;
	border-left: #CCCCCC 1px solid;
	border-right: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	background: #FFFFFF;
	min-height: 100%; /* Mindesthöhe für moderne Browser */
	height:auto !important; /* Important Regel für moderne Browser */
	height:100%; /* Mindesthöhe für den IE */
	overflow: hidden !important; /* FF Scroll-leiste */ 
}

#logo
{
	width: 49.9%;
	float: left;
	overflow: hidden;
	height: 100px;
}

#logo img
{
	border: 0 none;
	padding: 10px;
}

#newsflash
{
	width: 50%;
	float: left;
	overflow: hidden;
}

#newsflash .moduletable
{
	padding: 10px;
}

#newsflash .moduletable h3
{
	padding: 0;
	margin: 0;
	font-size: 100%;
	line-height: 1.5em;
	text-indent: 1.5em;
	background: url(../images/news.png) no-repeat left;
}
/* GRUNDAUFBAU TOP NAV */

#left
{
	width: 25%;
	float: left;
	overflow: hidden;
	background: url(../images/uri.gif) right bottom repeat-x #efefef;
	height: 100%;
}

#right
{
	width: 75%;
	float: left;
	overflow: hidden;
	
}

#pic_top
{
	width: 100%;
	float: left;
	overflow: hidden;
	background:url(../images/bg_img.jpg) no-repeat right;
	height: 200px;
	margin: 0;
	padding: 0;
}

#content
{
	width: 69.9%;
	float: left;
	overflow: hidden;
	
}

#content_right
{
	width: 100%;
	float: left;
	overflow: hidden;
	
}

#module
{
	width: 29.9%;
	float: left;
	overflow: hidden;
	
}

#position
{
	width: 100%;
	float: left;
	overflow: hidden;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	background: #efefef;
}

.bg_right
{
		background: url(../images/lineright.gif) no-repeat right;
}

#position1
{
	width: 33%;
	float: left;
	overflow: hidden;
}

#position2
{
	width: 33%;
	float: left;
	overflow: hidden;
}

#position3
{
	width: 33.9%;
	float: left;
	overflow: hidden;
}	

#footer
{
	width: 100%;
	float: left;
	overflow: hidden;
}

.inside_left
{
	padding: 5px;
	background: url(../images/ltb.gif) top repeat-x;
	border-right: 1px dashed #CCCCCC;
	
}


 /* ------------------- MENÜ LINKS --------------------*/
#left h3
{
	line-height: 1.5em;
	text-indent: 1.6em;
	border-bottom: #CCCCCC 1px solid;
	font-size: 100%;
	background: url(../images/h3m.gif) no-repeat left;
}

#left h3:hover
{
	background: url(../images/world.png) no-repeat left;
}
 
#left .moduletable_menu ul
{
	padding: 0;
	margin: 0;
}

#left .moduletable_menu ul li 
{
    list-style: none;
    margin: 0; 
	padding: 0;
}

#left .moduletable_menu ul li ul 
{
    margin: 0; 
	padding: 0;
}

#left .moduletable_menu ul li ul li 
{
    margin: 0;
}
  
* html #left .moduletable_menu ul li ul li {  /* Korrektur fuer IE 5.x */
    margin-left: 0;
    ma\rgin-left: 0;
}

#left .moduletable_menu ul a 
{
    display:block;
    padding: 0.5em 0.5em 0.5em 1.5em;
    text-decoration: none; 
	font-weight: bold;
	color: #666666;
	border-bottom: #CCCCCC dashed 1px;
	background: url(../images/mloff.gif) no-repeat left center;
}

  * html #left .moduletable_menu ul a {
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
  }
  * html #left .moduletable_menu ul li ul li a {
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 7.8em;  /* Breitenangabe fuer IE 6 */
  }
  
#left .moduletable_menu ul a:hover 
{
	background: #DFDFDF;	
	background: url(../images/mlon.gif) no-repeat left center;

}

/*----LOGIN LEFT----*/
#form-login
{
	padding: 0;
	margin: 0;
}

#left .input
{
	border: none;
}

#modlgn_username
{
	background: url(../images/user.png) no-repeat left #FFFFFF;
	height: 17px;
	padding-left: 20px;
	width: 60%;
	border: solid 1px #CCCCCC;
}

#modlgn_passwd
{
	background: url(../images/lock.png) no-repeat left #FFFFFF;
	height: 17px;
	padding-left: 20px;
	width: 60%;
	border: solid 1px #CCCCCC;
}
	

#form-login-username, #form-login-password, #form-login-remember
{
	padding: 0px;
	margin: 5px;
}

.moduletable ul li
{
	list-style-image:url(../images/pointg.gif);
}

.moduletable ul li:hover
{
	list-style-image:url(../images/pointgh.gif);
}

.moduletable ul li a
{
	color: #333333;
	text-decoration: none;
	font-size: 90%;
}

.moduletable ul li a:hover
{
	color: #000000;
	text-decoration: none;
}
```

und hier die verteilung in der php

```
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<?php 
$zeit =  $this->params->get('zeit');
$rss =  $this->params->get('syndi');
$width = $this->params->get('width');
?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/topmenu.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo  $this->params->get('color');  ?>.css" type="text/css" />

<?php if($zeit == "on") echo '<script type="text/javascript" src="'.$this->baseurl.'/templates/'.$this->template.'/js/zeit.js"></script>'; ?>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/stylechanger.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/moomenu.js"></script>

<style type="text/css">
#wrap
{
	width: <?php echo $width; ?>;
}
</style>
</head>

<body>

<div class="tooltop">
	<div class="inside">
    	<?php if($zeit == "on") echo '<div id="time"><div id="Uhr">&nbsp;</div></div>'; ?>
        <?php if($rss == "on") echo '<div id="syndicate"><jdoc:include type="modules" name="syndicate" /></div>'; ?>
		<div id="search"><jdoc:include type="modules" name="user4" type="xhtml" /></div> 
        <div id="fontsize"><script type="text/javascript">
				//<![CDATA[
					document.write('<a href="index.php" title="Schrift vergr&ouml;&szlig;ern" onclick="changeFontSize(2); return false;"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/bigger.png" alt="Schrift vergr&ouml;&szlig;ern" /></a>');
					document.write('<a href="index.php" title="Schrift zur&uuml;cksetzen" onclick="revertStyles(); return false;"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/normal.png" alt="Schrift zur&uuml;cksetzen" /></a>');
					document.write('<a href="index.php" title="Schrift verkleinern" onclick="changeFontSize(-2); return false;"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/smaller.png" alt="Schrift verkleinern" /></a></p>');
				//]]>
		</script></div>
    </div>
</div>
<div id="wrap">
	<div id="logo">
    	<div class="inside"><a href="<?php echo $this->baseurl ?>" title="Home"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="<?php echo $mainframe->getCfg('sitename');?>
" title="<?php echo $mainframe->getCfg('sitename');?>
" /></a></div>
    </div>
    <div id="newsflash">
    	<div class="inside"><jdoc:include type="modules" name="top" style="xhtml" /></div>
    </div>
    <div id="topnavwrap">
    <div id="topnav">
        	<jdoc:include type="modules" name="user3" style="xhtml" />
    </div>   
    </div>     
    <div id="left">
    	<div class="inside_left"><jdoc:include type="modules" name="left" style="xhtml" /></div>
    </div>
    <div id="right">
        <div id="pic_top"></div>
            <div id="content">
            	<div class="inside"><jdoc:include type="component" /></div>
            </div>
            <div id="module">
            	<div class="inside"><jdoc:include type="modules" name="right" style="xhtml" /></div>
            </div>
    </div>
    <div id="position">
    	<div id="position1">
    		<div class="inside"><div class="bg_right"><jdoc:include type="modules" name="position1" style="xhtml" /></div></div>
        </div>
    	<div id="position2">
    		<div class="inside"><div class="bg_right"><jdoc:include type="modules" name="position2" style="xhtml" /></div></div>
        </div>
    	<div id="position3">
    		<div class="inside"><jdoc:include type="modules" name="position3" style="xhtml" /></div>
        </div>
    </div>    
    <div id="footer">
    	<div class="inside"><jdoc:include type="modules" name="footer" style="xhtml" /></div>
    </div>
   
</div>
</body>

</html>
```

irgendwo passt was nicht 

grüße mirko


----------



## Maik (28. Juni 2009)

Hast du meine Antwort nicht zuende gelesen?

*#left* nimmt hier  keine 100%-Höhe ein, sondern erstreckt sich nur so weit, wie es sein Inhalt von ihm abverlangt.

mfg Maik


----------



## Webgau (28. Juni 2009)

schmarn, gibts eine möglichkeit das hinzubiegen?


----------



## Maik (28. Juni 2009)

Die gäbe es, und hab  in der Zwischenzeit ein Fallbeispiel entwickelt 

Ich nehme hier an, dass sich der Block *#left* im Viewport bis zum Beginn des Footerbereichs erstrecken soll:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-06-28">

<title>tutorials.de | demo_Webgau</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html,body {
height:100%;
margin:0;
padding:0;
}
#wrap {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
background:#fff;
}
#header {
height:230px;
background:#efefef;
}
#left {
position:absolute;
left:0;
top:230px;
bottom:100px;
width:25%;
background:#efefef url(http://www.webgau.de/juni/templates/juni/images/uri.gif) right bottom repeat-x;
}
#content {
margin-left:25%;
padding-bottom:100px;
}
#footer {
position:absolute;
left:0;
bottom:0;
width:100%;
height:100px;
background:#f5f5f5;
}
-->
</style>

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

</head>
<body>

<div id="wrap">
     <div id="header">
          <p>header</p>
     </div>
     <div id="left">
          <p>left</p>
     </div>
     <div id="content">
          <p>content</p>

          <!-- Der nachfolgende Inhalt ist von mir auskommentiert, um bei geringen Inhalt die "100%-Höhe" von "#left" im Viewport zu demonstrieren -->
          <!--<p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>content</p>
          <p>-END-</p>-->

     </div>
     <div id="footer">
          <p>footer</p>
     </div>
</div>

</body>
</html>
```


Das eingebundene Script "IE7.js" ist dem IE6 gewidmet, da er die kombinierte top/bottom-Positionierung für *#left* normalerweise nicht unterstützt (Quelle: http://code.google.com/p/ie7-js/).

Einziges Manko in diesem Konzept: Durch die absolute Positionierung von *#left* schiebt sein Inhalt den Footerbereich nicht nach unten, wenn er umfangreicher ist, als der Inhalt von *#content*, der wiederum den Footer nach unten schiebt. Dies liesse sich aber "im Notfall" mit einer Mindesthöhenangabe für *#content* beheben, die der Höhe des Inhalts von *#left* entspricht:

```
#content {
margin-left:25%;
padding-bottom:100px;
min-height:1050px; /* Höhe des linken Spaltenblocks aus der verlinkten Startseite ermittelt */
height:auto !important;
height:1050px;
}
```

Vielleicht kannst du damit dennoch etwas anfangen.

mfg Maik


----------

