# Layout mit DIV und CSS in voller Breite



## fanste (25. April 2006)

Hi,

Ich habe mir hier ein kleines Layout zusammengezimmert.

```
<!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>Testpage1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body
{
	margin:0px;
	padding:0;
	height:99.3%;
	overflow: auto;
}
body
{
	font: 76% arial,sans-serif;
}

div.navigation
{
	background:#7E7E80;
	font-size: 10pt;
	color:#FFFFFF;
	font-weight: bold;
	padding: 5px;
	height: 170px;
	float:left;
	width:190px;
	margin-left:-100%
}
* div.navigation
{
	height: 160px;
}

div.leftLayer
{
	float:left;
	width:200px;
	margin-left:-100%;
}
div.leftLayer .overhead
{
	background:#7E7E80;
	font-size: 10pt;
	color:#FFFFFF;
	font-weight: bold;
	padding: 5px;
}
div.leftLayer .Content
{
	font-size: 10pt;
	color:#black;
	padding: 5px;
	background:#8C8C8E;
}

div.footer
{
	background:#7E7E80;
	color:#FFF;
	height: 20px;
}
div.footer a
{
	display:inline;
}

div.wrapper
{
	float:left;
	width:100%
}
div.content
{
	margin-left:200px
}
div.extra
{
	clear: left;
	width:100%
}
div.container
{
	height: 96.8%;
	background-color:#0000CC;
}
</style>
</head>
<body>
<div class="container">
	<!--<div class="header">
		<h1>Header</h1>
	</div>-->
	<div style="width:600px;height:1px"></div>
	<div class="wrapper">
		<div class="content">
			<img src="HimmelGras_schnittKlein.jpg" style="width: 100%; height: 170px;" alt="" />		
		</div>
	</div>
	<div class="navigation">
		Home<br />Über mich<br /><br />
		Webdesign<br />Tutorials<br />Downloads<br /><br />
		Kontakt<br />Impressum	
	</div>
	<div class="extra" style="background-image:url(headerfill.gif);height: 15px; margin-top: -3px">
	</div>

	<div class="wrapper">
		<div class="content" style="margin-left: 250px; margin-top: 30px;">
			nfyxnmyxcybyxcvbcxnbycvxcvcbvmcbvyy xcvbdc b		
		</div>
	</div>
	<div class="leftLayer">
		<div class="overhead">
			::NEWS::
		</div>
		<div class="Content">
			Home<br />Über mich<br /><br />
			Webdesign<br />Tutorials<br />Downloads<br /><br />
			Kontakt<br />Impressum	
		</div>
		<div class="overhead">
			::Statistiken::
		</div>
		<div class="Content">
			Hier kommt ein Besuchercounterscript hin
		</div>
		<div class="overhead">
			::Infos::
		</div>
		<div class="Content">
			Optimiert für eine Auflösung ab 800*600<br />
			LOGO XHTML & CSS
		</div>
	</div>	
</div>
<div class="footer" style="background-image:url(headerfill.gif);">
	© 2006 by <a href="index.php?cat=impressum" title="Zum Impressum" target="_self">Stefan Grubisic </a>
</div>
</body>
</html>
```

Nun stören mich aber 2 Dinge.
Wenn ich das Fenster minimiere, legt es mir den Footer (letzter DIV im Code) über den Rest der Seite. Wie bekomme ich also den Footer ans untere Ende der Seite, ohne dass ich dieses Problem habe. Der Footer soll immer am unteren Ende der Seite sein, wenn der Inhalt nicht die ganze Seite ausfüllt. Wenn er größer ist, soll der Footer natürlich mitwandern.

Das zweite: Wenn ich das Fenster in der Breite noch kleiner ziehe, verhaut es mir irgendwie das ganze Layout. Woher kommt das?

Liegt es einfach nur am Browser? Oder ist der Code nicht so gut?
Falls ich den Code no machen soll. Das habe ich vor:
 - Das Layout soll immer über die ganze Bildschrimbreite gehen, egal welche Auflösung
 - Die linken Spalten (Die grauen Flächen) haben eine fixe Breite von 200px. Sie sollen die gesammte Höhe einfärben.
 - Die rechten Spalten passen sich dann immer der restlichen Breite an.
 - Footer sollte, wenn der Inhalt nicht ausreichend ist, um die ganze Seite zu füllen, immer am unteren Bildschrimrand sein. Ansonsten soll er mitwandern.

Hoffe auf eure Hilfe.


----------



## Maik (25. April 2006)

Vielleicht helfen dir die angehängten Beispiele von Dr Dau in dem Thread div height=100% nur im IE? weiter?


----------



## fanste (25. April 2006)

Hi,

Den habe ich auch vor ca. 30 Minuten gefunden . Habe damit und mit ein paar Links, die ich dort fand,  jetzt ein neues Layout entworfen, dass nicht "auseinander fällt".

Nun habe ich nur noch ein/e Problem/Frage. 
Wie bekomme ich den Footer in einem Div an den unteren Rand, ohne, dass ich "position:absolute" nehmen muss? Es kommt mir nämlich darauf an, dass man nicht scrollen muss, wenn der Inhalt nicht länger als die Seite ist, aber der Footer dennoch am unteren Rand des Browsers klebt.

Soll ich nochmal meinen neuen Code posten, damit ihr euch das besser vorstellen könnt, oder geht es ohne?


----------



## Maik (25. April 2006)

In diesem Beispiel besitzt der Footer eine feste Höhe und wird um dieses Maß mittels margin-top in den Viewport geschoben, also an den unteren Browserfensterrand. Wenn der Inhalt länger / höher als der Viewport ist, wandert der Footer mit.


```
<!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">
<title></title>

<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#content {
position: relative;
min-height: 100%;
}

* html #content { /* Für IE */
height: 100%;
}

#head {
height: 100px;
background: #efefef;
}

.pad {
height: 30px;
}

#foot {
position: relative;
height: 30px;
margin-top: -30px;
background: #efefef;
}
-->
</style>

</head>
<body>

<div id="content">
     <div id="head">head</div>
     <p>content with some dummy text -start-</p>
     <!--<p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text</p>
     <p>content with some dummy text -end-</p>-->

     <div class="pad">&nbsp;</div>
</div>
<div id="foot">foot</div>

</body>
</html>
```


----------



## fanste (25. April 2006)

Hi,

Vielen Dank. Dein Code hat mir nun die Erleuchtung gebracht, wie ich das bei mir realisieren kann. Ich war auch schon bei "relative". Habs aber wieder verworfen, weil es nicht an der Stelle war, an der es hätte sein sollen. Dabei hatte ich den Div nur an der falschen Stelle eingebaut 

EDIT:
Zu früh gefreut.

```
<!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">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 99.3%;
}

div.wrapper {
border: 1px solid #dfdfdf;
margin: 0;
padding: 0;
height: 100%;
}

div.outer {
border-left: 200px solid #f7f7f7;
height: 100%;
}

div.right {
border-left: 0px solid #dfdfdf;
margin: 0;
padding: 0;
height: 100%;
}

div.left {
float: left;
width: 200px;
margin-left: -200px;
position: relative;
z-index: 10;
height: 100%;
background: #8C8C8E;
}

div.clear
{
clear: left;
height: 0;
line-height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

div.navigation
{
	font-size: 10pt;
	color:#FFFFFF;
	font-weight: bold;
	background: #7E7E80;
	width: 100%;
	height: 170px;
}
div.abstand
{
	padding: 5px;
}

div.content
{
	width: 100%;
}
div.filler
{
	width:100%;
	background-image:url(headerfill.gif);
	height: 15px;
}
div.leftLayer
{
	width: 100%;
}
div.leftLayer .overhead
{
	background:#7E7E80;
	font-size: 10pt;
	color:#FFFFFF;
	font-weight: bold;
	padding: 5px;
}
div.leftLayer .Content
{
	font-size: 10pt;
	color:#black;
	background:#8C8C8E;
	padding: 5px;
}
div.footer {
position: relative;
height: 30px;
margin-top: -30px;
background: #efefef;
}
div.footerabstand
{
	width: 100%;
	height: 30px;
	background-color:#CC00CC;
}
-->
</style>

</head>
<body>

<div class="wrapper">
	<div class="outer">
		<div class="left">
			<div class="navigation">
				<div class="abstand">
					Home<br />Über mich<br /><br />
					Webdesign<br />Tutorials<br />Downloads<br /><br />
					Kontakt<br />Impressum	
				</div>
			</div>
			<div class="filler"></div>
			
			<div class="leftLayer">
				<div class="overhead">
					::NEWS::
				</div>
				<div class="Content">
					Home<br />Über mich<br /><br />
					Webdesign<br />Tutorials<br />Downloads<br /><br />
					Kontakt<br />Impressum	
				</div>
				<div class="overhead">
					::Statistiken::
				</div>
				<div class="Content">
					Hier kommt ein Besuchercounterscript hin
				</div>
				<div class="overhead">
					::Infos::
				</div>
				<div class="Content">
					Optimiert für eine Auflösung ab 800*600<br />
					LOGO XHTML & CSS
				</div>
			</div> 
			<div class="footerabstand"></div> 	
		</div>

		<div class="right">
        	<div class="content" style="height:170px;">
				<img src="HimmelGras_schnittKlein.jpg" style="width: 100%; height: 170px;" alt="" />
			</div>  
			<div class="filler"></div> 
			<div class="footerabstand"></div>  
		</div>
	</div> 
</div>
<div class="footer"><p>footer</p></div>
</body>
</html>
```

Wenn ich das Fenster minimiere, schiebt es mir den Footer wieder über den Rest der Seite. er bleibt also feste am unteren Rand kleben. 

Die rosa Flächen sind da, um den Inhalt nicht hinterm Footer verschinden zu lassen, wenn es zu viel wird. Die Farbe kommt da nacher natürlich wieder raus.


Was mich bei meinem Code auch noch stört, ist, dass nur der Div mit dem Inhalt mitwächst. Der Rest, einschließllich des wrapper Divs bleiben unverändert.


----------



## versuch13 (26. April 2006)

He, ich hoffe ich habe dich richtig verstanden. Google mal nach "einmal erdgeschoß bitte".

Gruß


----------



## fanste (26. April 2006)

Das ist ja schonmal nicht schlecht. Nur der IE scheint da mal wieder aus der Reihe zu tanzen.


----------



## Maik (26. April 2006)

fanste hat gesagt.:
			
		

> Was mich bei meinem Code auch noch stört, ist, dass nur der Div mit dem Inhalt mitwächst. Der Rest, einschließllich des wrapper Divs bleiben unverändert.


Vielleicht solltest du im DIV*.wrapper* eine Hintergrundgrafik einsetzen, die die linke Spalte simuliert und vertikal wiederholt wird.

Und wieso beschneidest du die Höhe für den Viewport mit height:99.3% ?


----------



## fanste (26. April 2006)

Ich weise dort eine Höhe von 99.3% zu, weil es im IE sonst einen Scrollbalken gibt. Der Footer soll ja ans untere Ende des Fenster/Inhalts. Ohne Scrollbalken. Außer der Inhlat wird größer als das Fenster.


----------



## Maik (26. April 2006)

Bei meinem zuletzt gezeigten Modell erscheint der Scrollbalken erst, wenn der Inhalt länger / höher als der Viewport ist, und das gilt auch für den IE:


```
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
```


----------



## fanste (26. April 2006)

Ich verwende bei mir den IE 7 Beta. Dort sind welche. Kann sein, dass es dort ein paar Darstellungsfehler noch gibt, oder?
Sitz jetzt grad an nem PC mit IE6. Dort funktioniert der Code, den ich zuletzt gepostet habe, sogar so, wie er soll.
War also die ganze Aufregung umsonst


----------



## Maik (26. April 2006)

Dann wirst du wohl eine CSS-Browserweiche mittels Conditional Comments für den IE6 und IE7 einsetzen müssen.


----------



## fanste (26. April 2006)

Wenn ich  Conditional Comments verwende, soll ich dann einfach beim IE auf volle Höhe verzichten, oder gibt es noch etwas anderes?


----------



## Maik (26. April 2006)

Das wirst du durch Experimente herausfinden müssen, was für den IE6 und IE7 unterschiedlich formatiert werden muß, da ich den IE7 auf meinem System nicht installiert habe und somit keine Kenntnisse / Erfahrungen über seine CSS-Interpretation besitze.


----------



## fanste (26. April 2006)

Ok. Dann werde ich mich mal ans experimentieren machen.


----------



## fanste (27. April 2006)

So wollte heute mal weiter machen. Habe die Seite bei mir geöffnet (IE6 wieder drauf) und festgestellt, dass es doch wieder dieses dämliche Problem mit dem "mitwachsen" und dem Footer gibt. Dann habe ich in der Schule nochmal genauer geschaut, welche version des IEs drauf ist. Es ist Version 5. Kann es ein, dass es dieses Problem jetzt auch noch im IE6 gibt. Könnte das mal einer testen? Vll habe ich auch noch irgendwelche Überreste des IE7 bei mir drauf.


----------

