✔ ... ein weiteres CSS Layout Problem

Status
Nicht offen für weitere Antworten.
aphaean

aphaean

Mitglied
Goodafternoon Ladies and Gentlemen!

CSS beschert mir zur Zeit mit einem recht simplem Layout (dachte ich) einen Krampf.

Ich würde gern eine Seite mit drei horizontalen Bereichen (rows) ohne Ränder (borders), jeweils über die gesamte Seitenbreite haben.

1. Reihe soll eine fixerte Hoehe (100px) haben
2. Reihe soll eine variable Hoehe haben
3. Reihe soll eine fixierte Hoehe (100px) haben

Faktisch ist also die 2. Reihe jene, die sich bei Veränderungen des Browserfensters anpasst. Die Gesamtseite soll nicht die Maße des Browserfensters überschreiten (also keine vertikale Scrollbar).

Wichtig ist noch, dass die 2. Reihe im Falle eines Inhalt Overflows (mehr Inhalt als Platz vorgesehen) sich nicht in der Größe verändert, sondern nur scrollbar wird.

Mit Frames waere das Ding einfach drei Rows mit den Height attributen 100px, * , 100px - aber wie mit CSS?

Ich hoffe, ich habe mich nicht allzu verwirrend ausgedrückt, und wäre für einen Hinweis oder zwei ausgesprochen dankbar ;).

cheerio,
anna
 
Probier mal Folgendes:
HTML: 
<div id="container">
	<div id="row-1">Reihe 1</div>
	<div id="row-2">Reihe 2</div>
	<div id="row-3">Reihe 3</div>
</div>
Code: 
html, body {
	height:				100%;
}
body {
	margin:				0;
	padding:			0;
	background-color:		#6f6;
}
#container {
	position:			relative;
	min-height:			100%;
	height:				100%;
	voice-family:			"\"}\"";
	voice-family:			inherit;
	height:				auto;
}
html>body #container {
	height:				auto;
}
#row-1 {
	height:				100px;
	background-color:		#f66;
}
#row-2 {
	padding-bottom:			100px;
}
#row-3 {
	position:			absolute;
	bottom:				0;
	width:				100%;
	height:				100px;
	background-color:		#66f;
}
 
Herzlichen Dank für die Tips und Hinweise - sie haben viel geholfen *smile*. IMHO sollte man jedoch die Positionierungstechnik von divs in CSS noch einmal herb überdenken *grmpf*. Früher war halt alles einfacher *grins*

cheerio,
anna

P.S. Würde für die Unterstützung gerne eine Runde Kaffee spendieren ...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück