✔ Wrapper-Layer geht nicht auf 100%

Status
Nicht offen für weitere Antworten.
R

rethus

Erfahrenes Mitglied
Hallo,

irgendwie komm ich nicht weiter.
Ichhabe mir ein Layout zusammengestrickt, doch ich bekomme es nicht hin, das er die Layer automatisch auf 100% des Browser-Fensters anpasst.

wenn ich im Stylesheed html, body{ height:100%;} eingebe, ist der Layer immer um einiges Größer als 100%

Kann mir da vielleicht mal jemand einen Tip geben, was ich falsch mache?

Hier der Quellcode:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Layout Bost-PC-Service</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	html, body
	{
		height:100%;
		width:100%;
		margin:0;
		padding:0;
	}
	body
	{
		margin:0%;
		padding:0%;
		font: 76% arial,sans-serif;
	}
	p
	{	
		margin:0 10px 10px;
	}
	a
	{	
		display:block;
		color: #006;
		
	}
/* HEADER */	
	div#container
	{
		min-height: 100%;
		height: auto !important;
		height:100%;
	}
	div#header
	{
		position:relative;
		width:100%;
		height:245px;
		
	}
	div#right
	{
		background-color:inherit;
		position:relative;
		width: 100%;
		height:245px;
		background-image: url(header_rechts.png);
		background-repeat:repeat-x;
		float: right;
	}
	div#left
	{
		position:relative;
		width: 256px;
		height:245px;
		display: block;
		background-image:url(header_links.gif);
		background-repeat:no-repeat;
	}
	
	div#light
	{
		background-color:inherit;
		position:absolute;
		left:0px;
		top:0px;
		z-index:10;
		width: 656px;
		height:22px;
		background-image: url(header_light.png);
		background-repeat:no-repeat;
	}
	div#logo
	{
		background-color:white;
		position:absolute;
		left:65px;
		top:80px;
		width: 154px;
		height:160px;
		border:gray solid 2px;
		background-image: url(logo.png);
		background-repeat:no-repeat;
		background-position:center center;
	}	
	

/* CONTENT */
	div#content p
	{
		line-height:1.4;
	}
	div#content
	{
		margin-left:250px;
	}
/* NAVI */
	div#navi
	{
		background:white;
		float:left;
		width:230px;
		text-align:right;
	}
	ul#Navigation
	{
		padding-left:65px;
		margin:0px;
		background-color:white;
	}
	#Navigation li 
	{
		padding:0px; 
		margin:0px;
		list-style-type: none;
		font-size: 1em;
		white-space: nowrap;

		text-align:left;
		text-transform:uppercase;
		text-decoration:none;
	}
	ul#Navigation a 
	{
		padding:4.5px;
		padding-left:35px;
		background-image: url(button.gif);
		background-repeat:no-repeat;
		background-position:left;
		
		font-family:verdana, sans serif;
		font-size: 0.825em;
		font-weight: bold;
		color: white; 
	}
	ul#Navigation a:link 
	{
		text-decoration:none;
	}
	ul#Navigation a:visited 
	{
		color: white; 
		text-decoration:none;
	}
	ul#Navigation a:hover 
	{
		text-decoration:underline;
		font-style:bold;
	}
	ul#Navigation a:active 
	{
		background-color:#999999;
		text-decoration:none;
		font-weight:normal;
	}
/* RED_PANEL */
	div#redPanel
	{
		background:inherit;
		float:left;
		clear:left;
		width:230px;
		height:100%;
	}
	div#redPanel p
	{
		position:relative;
		margin-left:66px;
		margin-right:0px;
	}
	div#redPanel p#oben
	{
		margin-top:1px;
		margin-bottom:0px;
		background-image: url(redPanel_oben.png);
		background-repeat:no-repeat;
		height:40px;
	}
	div#redPanel p#mitte
	{
		margin-top:0px;
		margin-bottom:0px;
		background-image: url(redPanel.png);
		background-repeat:repeat-y;
		height:100%;
	}
	div#redPanel p#unten
	{
		margin-top:0px;
		margin-bottom:1px;
		background-image: url(redPanel_unten.png);
		background-repeat:no-repeat;
		height:40px;
	}

/* Footer */
	div#footer
	{
		position:relative;
		width:100%;
		height:81px;
	}
	div#f_right
	{
		background-color:inherit;
		position:relative;
		width: 100%;
		height:81px;
		background-image: url(footer_rechts.gif);
		background-repeat:repeat-x;
		float: right;
	}
	div#f_left
	{
		position:relative;
		width: 256px;
		height:81px;
		display: block;
		background-image:url(footer_links.gif);
		background-repeat:no-repeat;
	}

	div#wrapper
	{
		float:right;
		width:100%;
		margin-left:-253px;
	}
	div#footer
	{
		clear:both;
		width:100%;
	}
  </style>
</head>
<body>
<div id="container">
	<div id="header">
		<DIV id="right">
			<DIV id="light"></DIV>
			<DIV id="left">
				<DIV id="logo"></DIV>
			</DIV>
			
		</DIV>
	</div>
	<div id="wrapper">
		<div id="content">
			<p><strong>1) Content here.</strong>&nbsp; </p>
			<table height="100px"><TR><TD>asdf</TD></TR></table>
		</div>
	</div>
	<div id="navi">
		<ul id="Navigation">
			<!-- Achtung müssen ohne Zeilenumbruch hintereinander, sonst zerschiest es IE6-->
			<li><a href="#">Über uns</a></li><li><a href="#">PC-Service</a></li><li><a href="#">Unterricht</a></li><li><a href="#">Notdienst</a></li><li><a href="#">Webdesign</a></li></ul>
	</div>
	<div id="redPanel">
		<p id="oben"></p>
		<p id="mitte"></p>
		<p id="unten"></p>
	</div>
	<div id="footer">
		<DIV id="f_right">
			<DIV id="f_left"></DIV>
		</DIV>
	</div>
</div>
</body>
</html>
 
Daß das DIV #container derzeit höher als 100% dargestellt wird, liegt an der fettmarkierten CSS-Eigenschaft für folgende Elemente, die sich im HTML-Code direkt über dem Footer befinden:

Code: 
div#redPanel
        {
                background:inherit;
                float:left;
                clear:left;
                width:230px;
                height:100%;
        }

div#redPanel p#mitte
        {
                margin-top:0px;
                margin-bottom:0px;
                background-image: url(redPanel.png);
                background-repeat:repeat-y;
                height:100%;
        }
 
So, wir sind der Lösung schon etwas näher.
Die Übergröße ist verschwunden, allerdings habe ich jetzt auch keine Bildansicht von 100%... d.h. das Layout ist wieder kleiner...

Allerdings habe ich da auch ein neues Problem.

Rechts im Navigationsbereich ist eine rote Box (redPanel), die je nach Seitengröße dynamisch mitwachsen soll. Deswegen hatte ich bei redPanel height:100%. Also wenn der Content so gr0ß wird, das er das Layout ausweitet, soll die Rote Box vertikal mitwachsen.

Gibt es da eine Lösung?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück