CSS Container bis ans Seitenende und gleichzeitig Höhenindikator

[Mr.Blade]

Hallo,

ist es möglich, einen Container bis ans Seitenende laufen zu lassen und gleichzeitig als "Höhenindikator" fungieren zu lassen?

Hier die Problematik.

Die beiden Seitenleisten sind hier deutlich länger als der Beitragsinhalt. Da dieser jedoch die Höhe vorgibt, werden die Seitenleisten verschluckt. Die mittlere (erste) Sidebar ist wie folgt beschrieben:

#midbar-wrapper {
	display: block;
	position: absolute;
	right: 225px;
	height: 100% !important;
	/* ----------------------------- */
	overflow: visible;
	width: 275px;
	background: #222;
    -webkit-transition: all 25ms ease-in-out;
    -moz-transition: all 25ms ease-in-out;
    -o-transition: all 25ms ease-in-out;
    transition: all 25ms ease-in-out;
}

#midbar {
	color: #fff !important;
    display: block;
    text-align: left;
	margin-top: 20px;
	position: relative;
}

Warum habe ich die Seitenleisten absolut positioniert? Damit sie andersherum bei Beiträgen, die länger sind als die Seitenleisten, die Höhe vorgeben und ans Ende laufen, wie zum Beispiel hier.

Habt Ihr vielleicht eine Idee?

Danke!

Gruß

 

[Chrissraud]

Das sollte funktionieren wenn du ne min-height vorgibst.
Bin mir da aber grade nicht ganz sicher.

 

[Mr.Blade]

Ja, das ist grundsätzlich richtig, nur ist der Inhalt eben so "dynamisch", dass ich da keine Konstante finden kann, auch was die Seitenleisten angeht.

Trotzdem Danke.

Gruß

 

[Daaron]

Da gibts einige Ansätze.... aber keiner setzt auf absolute Positionierung, denn absolute Positionierung ist bei solchen Fällen schlichtweg Bullshit. Ein absolutes Element hat für seine Umgebung schlichtweg KEINE Höhe und Breite, es existiert nicht. Es floatet nicht, es bricht nichts um,...

YAML sollte durchaus gehen.
Ich war immer ein großer Fan von Holy Grail - Ansätzen...
...aber da wir unseren Kunden inzwischen meist von vornherein sagen, dass wir keinen Support mehr für IE9 und älter (sowie andere Rotze-Uralt-Browser wie Safari 5) bieten, habe ich solche Sorgen nicht mehr. Nichts, was das CSS3 Flex Model nicht viel effizienter lösen kann. Perfekte Semantik ohne Hilfscontainer. Perfekte Flexibilität für Responsive Designs. Einfache Wartbarkeit.

 

[Mr.Blade]

Danke.

Du kannst dir sicherlich denken, wie hoch und nervenaufreibend der Arbeitsaufwand wäre, würde ich die gesamte Seite auf ein CSS-Framework umkrempel? Zumindest in meiner Lage als jemand, der wenig Ahnung von HTML, CSS hat.

Dieses "es existiert nicht" hat mich jedoch auf einen simplen, aber funktionalen Ansatz gebracht: Ich erstelle einfach einen Dummy-Container, der absolut positioniert ist mit gleichen Eigenschaften.

Damit müssen nur wenige Dateien angepasst werden und ein Framework oder weitere Anpassungen sind nicht länger von Nöten.

Hier der Code, als Ergänzung zu obrigem:

#midbar-container {
	position: absolute;
	background: #222;
	width: 275px;
	height: 100%;
	right: 225px;
}

#midbar-wrapper {
	display: block;
	float: right;
	position: relative;
	margin-right: 225px;
	height: 100% !important;
	min-height: 100%;
	overflow: hidden;
	width: 275px;
	background: #222;
    -webkit-transition: all 25ms ease-in-out;
    -moz-transition: all 25ms ease-in-out;
    -o-transition: all 25ms ease-in-out;
    transition: all 25ms ease-in-out;
}	

#midbar {
	color: #fff !important;
    display: block;
    text-align: left;
	margin-top: 20px;
	position: relative;
	min-height: 100%;
}

Gruß

 

[Daaron]

YAML & Holy Grail benötigen doch keinen kompletten Umbau. Das Zeug besteht nur aus ein paar clever platzierten Klassen sowie Containern...

Außerdem: Ist dir denn der IE<=9 so wichtig? Schieß den alten SChrott in die Tonne, setz auf CSS3 Flex.

 

[Mr.Blade]

Nein, Support für ältere Browser ist mir nicht wichtig, ich schaue mir das Framework nochmal an, nur habe ich nicht wirklich viel Lust dazu.