✔ ... ein weiteres CSS Layout Problem

[aphaean]

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

 

[Maik]

Ich empfehle dir das Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken.

 

[Gumbo]

Probier mal Folgendes:

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

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;
}

 

[Maik]

Vielleicht helfen dir auch Stu Nicholls' CSS-Modelle weiter?

1. 'Fixed' layout version 1
   
   
2. 'Fixed' layout version 2

 

[aphaean]

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 ...