✔ <div> Seitenlayout

Status
Nicht offen für weitere Antworten.
V

vrcat

Mitglied
Hallo zusammen,

habe mal wieder eine Elementare Frage ich versuche nun schon seit Stunden den Content bereich meiner Seite 100% zwischen Header und Footer zu bekommen. Jedoch muss ich sagen mit eher Mäßigem Erfolg ich hoffe ihr könnt mir Helfen.

Code: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
html, body {
	height			: 100%;
	margin			: 0;
	padding			: 0;
} 

#outer {
	position		: absolute;
	top				: 2%;
	height			: 95%;
	width			: 90%;
	left			: 5%;	
	border			: 2px solid #000000;
	margin			: auto;	
}

#header {
	position		: absolute;
	top				: 0;
	left			: 0;
	width			: 100%;
	height			: 80px;
	background		: #FF0000;

	overflow		: hidden;
	z-index			: 100;
}

#footer {
	position		: absolute;
	bottom			: 0;
	left			: 0;
	width			: 100%;
	height			: 160px;
	background		: #FF0000;

	overflow		: hidden;
	z-index			: 100;
}

/* ie rundungs fehler */
* html #footer { margin-bottom	: -1px;  }
* html #footer { height			: 160px; }

#content {
	position		: relative;
	width			: 100%;
	padding-top		: 80px;	
	background-color: #00FF00;
}


</style>
</head>

<body>

<div id="outer"> 
 <div id="header"> HEADER </div>
 <div id="content"> CONTENT <br/> Test Inahlt </div>
 <div id="footer"> FOOTER </div>
</div>

</body>
</html>

Schon mal vielen Dank fürs lesen und tausend Dank für eine Lösung.
mfg
Mathias
 
Bestimme mal die derzeitige Content-Hintergrundfarbe für das DIV #outer.
 
Jepp, genau der Content <DIV> soll den gesamten Bereich zwischen HEADE und FOOTER ausfüllen. Das mit der Hintergrundfarbe habe ich schon mal ausprobiert dabei habe ich nur das Problem das ich nicht weis wie den CONTENT bereich dann Scrollbar machen kann. Gibt’s dafür ne Lösung?

Code: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
html, body {
	height			: 100%;
	margin			: 0;
	padding			: 0;
} 

#outer {
	position		: absolute;
	top				: 2%;
	height			: 95%;
	width			: 90%;
	left			: 5%;	
	border			: 2px solid #000000;
	background-color: #00FF00;
	margin			: auto;	
}

#header {
	position		: absolute;
	top				: 0;
	left			: 0;
	width			: 100%;
	height			: 80px;
	background		: #FF0000;

	overflow		: hidden;
	z-index			: 100;
}

#footer {
	position		: absolute;
	bottom			: 0;
	left			: 0;
	width			: 100%;
	height			: 160px;
	background		: #FF0000;

	overflow		: hidden;
	z-index			: 100;
}

/* ie rundungs fehler */
* html #footer { margin-bottom	: -1px;  }
* html #footer { height			: 160px; }

#content {
	position		: relative;
	width			: 100%;
	padding-top		: 80px;	
	background-color: #00FF00;
}


</style>
</head>

<body>

<div id="outer"> 
 <div id="header"> HEADER </div>
 <div id="content"> CONTENT <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt<br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt <br/> Test Inahlt10
</div>
 <div id="footer"> FOOTER </div>
</div>

</body>
</html>
 
Also wenn ich dein Anliegen richtig verstanden habe, dann würde ich mal margin-top: 0px und margin-bottom: 0px; bei dem Content und beim header margin-bottom: 0px; und beim footer margin-top: 0px; machen, erzähl dann mal wie es dann aussieht.
 
Erstmal besten danke an alle!
@Carrear: leider hat es nicht so richtig geklappt da der Content sich unter dem Header befand.
@michaelsinterface: super also der Link hat enorm weiter geholfen als noch mal danke.

So nun funktioniert die Sache im FF so wie sie funktionieren soll ein Problem tritt jedoch noch im IE auf der will den Content nicht scrollen und zieht in einfach bis unten durch wenn wir da noch eine Lösung finden könnten wäre mit sehr geholfen.

Code: 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
html, body {
	height			: 100%; 
	padding			: 0; 
	margin			: 0; 
	overflow		: hidden;
}

#outer {
	margin			: auto;
	position		: absolute;
	top				: 2%;
	height			: 95%;
	width			: 90%;
	left			: 5%;	
	border			: 2px solid #000000;
}


#content {
	display			: block; 
	overflow		: auto; 
	position		: absolute; 
	top				: 80px; 
	bottom			: 160px; 
	width			: 100%; 
	background		: #ffffff;
}

#head {
	margin			: auto;	
	position		: absolute; 
	top				: 0; 
	width			: 100%; 
	height			: 80px; 
	background		: #ff0000; 
}

#foot {
	margin			: auto;	
	position		: absolute; 
	bottom			: 0; 
	width			: 100%; 
	height			: 160px; 
	background		: #ff0000; 
}

</style>
</head>

<body>
<div id="outer">
	<div id="head">HEADER</div>
	<div id="foot">FOOTER</div>
	<div id="content">
CONTENT <br/>Test Inhalt<br/>Tes<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt
	</div>
</div>

</body>
</html>
 
Du solltest nochmal den CSS-Code der genannten Seiten studieren und (vollständig) in deiner Seite implementieren.
 
Hi,

dein Vorhaben geht nicht mit dem vorhandenen CSS.

Du hast eine Hauptbox, in welche du absolute Positionierungen einbindest. Ist so nicht möglich.

Zudem werden 0 Werte ignoriert. Die kannst du entweder komplett weg lassen oder du gibst eine Einheit dazu an.

Eine von vielen Möglichkeiten - unter Berücksichtigung deiner Vorgabe:

Code: 
html, body {
	height			: 100%; 
	padding			: 0px, 0px, 0px, 0px; 
	margin			: 0px, 0px, 0px, 0px; 
	overflow		: hidden;
}

#outer {
	position		: absolute;
	top				: 0%;
	height			: 95%;
	width			: 90%;
	left			: 5%;	
	border			: 2px solid #000000;
}


#content {
	display			: block; 
	overflow		: auto; 
	position		: absolute; 
	top				: 80px; 
	bottom			: 160px; 
	width			: 100%; 
	background		: #ffffff;
}

#head {
	position		: absolute; 
	top				: 0px; 
	width			: 100%; 
	height			: 80px; 
	background		: #ff0000; 
}

#foot {
	position		: absolute; 
	bottom			: 0px; 
	width			: 90%;
	left			: 5%;	
	border			: 2px solid #000000;
	height			: 160px; 
	background		: #ff0000; 
}

Damit es. Allerdings würde ich es so nicht zur Umsetzung vorschlagen können.
 
@ saila

Dein Vorschlag erzielt im IE überhaupt keine Veränderung, geschweige denn eine Verbesserung, denn der Content-Bereich kann noch immer nicht gescrollt werden. Stattdessen wird das DIV #outer weiterhin nach unten (in den nicht-sichtbaren Bereich) ausgedehnt.

Und seit wann werden 0-Werte ignoriert?

Eine Einheit muß nur dann hinzugefügt werden, wenn der Wert größer oder kleiner als null ist.

Zudem ist das hier falsch:

Code: 
padding:0px, 0px, 0px, 0px; 
margin:0px, 0px, 0px, 0px;
Die einzelnen Werte werden ohne Kommatas notiert und lassen sich, wie von vrcat richtig eingesetzt, vereinfacht zusammenfassen:

Code: 
padding:0; 
margin:0;

Kurzum: die Qualität deines Beitrages lässt leider zu wünschen übrig.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück