2 div: jeweils px und % angaben auf 100%

napoli · #1 (**permalink**) 25.03.2012, 16:58

hi,
ich bekomme zZt leider nicht hin 2 div innerhalb eines elterndivs vertikal zu "stapeln".

ein div hat height: 200px;
das andere: 100%

ich möchte nun das beide divs 100% des elterndivs füllen

hier mal ein konstrukt:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
html{
	height:100%;
	margin:0 auto;
}
#header {
	background-color: yellow;
	height: 100%;
	width: 100%;
}
#b1 {
	background-color: blue;
	width: 100%;
	height: 200px;
}
#b2 {
	background-color: red;
	width: 100%;
	height: 100%;
}
</style>
</head>

<body>

<div id="header">
  <div id="b1"></div>
  <div id="b2"></div>
</div>


</body>
</html>

klar könnte man jetzt bei #b2 height: 50%; machen, allerdings wollen wir doch variabel arbeiten und demnach, muss eine richtige lösung her.

mfg

gato · #2 (**permalink**) 25.03.2012, 17:12

Ich verstehe leider nicht, was du bezwecken möchtest.

Wenn es dir nur darum geht #b1 und #b2 (was ist b1?, was ist b2?) genau übereinander zu legen und das header-Element sowieso eine feste Höhe hat, dann kannst du header relativ positionieren und dadurch für #b1 und #b2 absolute Positionierung verwenden.

cebito · #3 (**permalink**) 25.03.2012, 17:14

Zitat:

Zitat von napoli

allerdings wollen wir doch variabel arbeiten und demnach, muss eine richtige lösung her

Und was heißt für dich "variabel arbeiten"?

Manfred62 · #4 (**permalink**) 25.03.2012, 17:18

Zitat:

Zitat von cebito

Und was heißt für dich "variabel arbeiten"?

Feste Höhe...

scnr

napoli · #5 (**permalink**) 25.03.2012, 17:19

ich muss mich verbessern, tut mir leid, das elternelement hat width und height 100%, ich korrigiere schnell mein posting.

ziel und zweck ist es b2 unterhalb b1 anzeigen zu lassen, aber es soll nicht über das eltern div hinausragen.

Praktikant · #6 (**permalink**) 25.03.2012, 17:21

Wenn #b1 einen Hintergrund hat, der nicht durchsichtig ist, dann kannst du auch einfach #b1 in #b2 packen. Eine andere Lösung ohne JS gibt es nicht, wenn #header seine feste Höhe nicht behalten soll.
Hat #header eine feste, vorher bekannte Höhe, dann kannst du auch den freien Platz für #b2 mit einer serverseitigen Sprache ausrechnen.

cebito · #7 (**permalink**) 25.03.2012, 17:34

Sowas würde mit CSS3 gehen,

Code:

height:calc(100% - 200px);

aber da ist die Browserunterstützung noch ungenügend, deshalb wirst du positionieren müssen:

Code:

#header {
	background-color: yellow;
	height: 100%;
	position:relative;
}
#b1 {
	background-color: blue;
	height: 200px;
	position:relative;
	z-index: 2;
}
#b2 {
	background-color: red;
	width: 100%;
	height: 100%;
	position:absolute;
	top:0;
	left:0;
}
#b2 p{
	padding-top: 200px;
}

In b2 ein p-Element oder was weiß ich und dem ein padding-top verpasst.

Edit

manchmal seh ich auch den Wald... @Praktikant, klar, b1 in b2 geht natürlich

napoli · #8 (**permalink**) 25.03.2012, 17:45

@ Praktikant und Cebito, vielen dank!

ihr habt 2 Lösungen gefunden, die dem obigen beispiel gerecht werden, ABER wenn man nun die einfarbigen container zu gradient container macht funktionieren eure vorschläge leider nicht mehr, da ja der jeweilige container den anderen überlagert und somit der farbverlauf in der mitte unterbrochen wird.

Praktikant · #9 (**permalink**) 25.03.2012, 17:47

Stimmt. Das geht nicht. Aber du kannst ja noch mit JavaScript rechnen. Man kann eben nicht alles haben

napoli · #10 (**permalink**) 25.03.2012, 17:50

und ich dachte dass das nicht zuviel verlangt ist

schade dass sogar overflow: hidden da nicht hilft.

EDIT: mal etwas vom ursprungposting abgewichen, das hier wird also ohne images nicht machbar sein?

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
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 17:53
Header entfernen	tripple	CSS	17	15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 11:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 20:18