DIV height 100%

Webgau

Mitglied
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:

PHP:
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
 
Zuletzt bearbeitet:
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
 
vielen dank ersteinmal, aber leider geht es trotzdem net. Hier mal mein CSS Code
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:
<?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
 
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
 
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:
HTML:
<!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:
CSS:
#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
 
Zurück