3 Spalten gleiche Höhe, min-height:100%;

Lars282 · #1 (**permalink**) 01.08.2009, 19:38

Ich habe ein Drei-Spalten Layout, wobei die äußeren beiden ohne Inhalt bleiben werden, aber die länge der mittleren haben sollen. Funktioniert auch super, solange die Länge der Mittleren Spalte durch die Menge des Inhalts bestimmt wird in Safari und FF3, mit IE muss ich noch schauen, da ich auf einem Mac arbeite.

Jetzt sollen alle Spalten mindestens die Höhe der Seite haben und länger werden, falls wegen des Inhaltes nötig. Habe dafür zum Style der mittleren Spalte min-height:100%; hinzugefügt. Funktioniert prima mit Safari, aber in FF3 nimmt er trotzdem nur die für den Inhalt benötigte Höhe für alle drei Spalten.

Wenn ich min-height:100% zu jeder Spalte hinzufüge, wird nur die Linke so wie gewollt, die anderen richten sich weiterhin nach dem Inhalt.

Sie bekommen alle die Höhe der Seite, wenn ich height:100%; hinzufüge, nur werden sie dann auch nicht länger, falls der Inhalt es fordert.

Wenn ich anstelle der %-Angabe eine feste Zahl benutze, geht es auch.

Hier die Seite.

Wo liegt das Problem mit FF3? Oder ist eigentlich Safari das Problem?

Lieben Dank!!
Lars

regloh · #2 (**permalink**) 03.08.2009, 08:00

Also ich kann nirgends ein min-height erkennen, aber vermutlich liegt dein Problem daran, dass <html> kein height: 100% hat.

heiko_rs · #3 (**permalink**) 03.08.2009, 10:03

Deine Konstruktion kann nicht funktionieren, da min-height immer eine height-Deklaration des direkten Elternelementes erfordert.

Lars282 · #4 (**permalink**) 03.08.2009, 13:01

Ah ok ... habe jetzt für die Elternelemente jeweils height: auto; genommen, scheint aber nicht zu gehen ... würde euch spontan einfallen, wie ich das hinbkommen kann?

Lieben Dank,
Lars

Hier die Seite

HTML-Code:

<html>
<head>
<style type="text/css" media="screen">

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0px;
}
#column-one {
	height: auto;
	float: left;
	width: 10em;
	background: red;
}
#column-two {
	height: auto;
	float: left;
	width: 20em;
	margin-left: 20em;
	background: green;
}
#column-three {
	float: left;
	width: 10em;
	margin-left: -10em;
	background: blue;
	
	min-height: 100%;
}
</style>
</head>
<!--[if lte IE 7]>
   <style type="text/css" media="screen">
   * html #column-two,
   * html #column-three,
   * html #content-three,{
	display: inline;
}
   * html #column-two,
   * html #column-three,{
	position: relative;
}
</style><![endif]-->

<body>
<div id="column-one">
	<div id="column-two">
		<div id="column-three">

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Hallo

		</div></div></div>
</body>
</html>

heiko_rs · #5 (**permalink**) 03.08.2009, 13:05

height: auto; ist gleichbedeutend mit gar keiner height-Deklaration. Ich schlage vor FAQ 1 und 7 in Kombination.

Lars282 · #6 (**permalink**) 03.08.2009, 17:22

Mh, FAQ 1 hatte ich auch schon gefunden, nur missfällt es mir persönlich, so die Spalten zu faken, da es dann wesentlich aufwendiger wird, die Breite der Seite zu ändern - in obigen und ähnlichen Beispielen kann man die Breite ja relativ einfach ändern.

Naja, werde mal schauen, unter Umständen könnte man die Hintergrundgrafik auch mit PHP erstellen, dann wäre das Ändern der Breite vielleicht einfacher. Mal schaun.

Trotzdem ganz lieben Dank für die Hilfe! Falls noch jemand eine Idee hätte, würde ich mich freuen.

Gruß, Lars

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Layout: 2 Spalten gleich langer Höhe	Boof	CSS	1	05.03.2010 10:50
Erstellen eines Layouts; 3 Spalten; Zentriert; 100% Höhe	mavnezz	CSS	9	27.08.2009 18:25
li Spalten mit gleicher Höhe	marc75	CSS	1	24.06.2009 15:05
CSS Drei Spalten selbe Höhe	dope_dope	(X)HTML	16	11.05.2005 14:35
3 spalten layout - immer auf gleiche höhe "auffüllen&qu	dimension	CSS	2	22.09.2004 12:02