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:
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
hier sieht man wie "b2" der untere container den elterncontainer übersteigt:
beide gradients sollten als ergebnis gleich groß sein. (der untere gradient nur, den restlich verfügbaren platz einnehmen)
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:
<!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;
}
#site {
height: 400px;
width: 400px;
margin-right: auto;
margin-left: auto;
}
#header {
background-color: yellow;
height: 100%;
width: 100%;
}
#b1 {
background:-moz-linear-gradient(top, #ffffff, #000000); /* Firefox */
width: 100%;
height: 200px;
}
#b2 {
background:-moz-linear-gradient(top, #ffffff, #000000); /* Firefox */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="site">
<div id="header">
<div id="b1"></div>
<div id="b2"></div>
</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
hier sieht man wie "b2" der untere container den elterncontainer übersteigt:
beide gradients sollten als ergebnis gleich groß sein. (der untere gradient nur, den restlich verfügbaren platz einnehmen)
Zuletzt bearbeitet:
