nicht angemeldet
100% höhe in einer Box mit 100% höhe
Hallo Gemeinde,
Ich möchte in einer ccs Box mit 100% Höhe und fester Breite eine Box anzeigen lassen die, mit fester Breite und auch 100% Höhe. Problem ist das die Box2 keine 100% Höhe anzeigt. Mir raucht der Kopf. Wer weis mehr?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>bla</title>
<STYLE TYPE="text/css">
html, body{
margin:0px;
padding:0px;
text-align:center;
height:100%;
min-height:100%;
background-color: #336699;
}
#box{
width:61em;
text-align:left;
margin-left:auto;
margin-right:auto;
background-color: #000033;
min-height:inherit;
height:auto !important;
height:100%;
}
#box2{
width:30em;
text-align:left;
margin-left:auto;
margin-right:auto;
background-color: #330033;
min-height:inherit;
height:auto !important;
height:100%;
}
</STYLE>
</head>
<body>
<div id="box">test
<div id="box2">test1
</div>
</div>
</body>
</html>
Danke
Seppelfricke
-
Hi,
Ich möchte in einer ccs Box mit 100% Höhe und fester Breite eine Box anzeigen lassen die, mit fester Breite und auch 100% Höhe. Problem ist das die Box2 keine 100% Höhe anzeigt. Mir raucht der Kopf. Wer weis mehr?
min-height:100% "vererben" zu lassen, klappt in der Praxis nicht.
Ggf. koenntest du die innere Box absolute in der aeusseren Positionieren - an deren top und bottom?
Kommt natuerlich auf die Inhalte an, bzw. wie du dann mit eventuell Ueberfliessendem umgehen willst.MfG ChrisB
-
Hi,
Hi ChrisB,
min-height:100% "vererben" zu lassen, klappt in der Praxis nicht.
das war der Wink mit dem Zaunpfahl :) So klappt es :
<STYLE TYPE="text/css">
html, body{
margin:0px;
padding:0px;
text-align:center;
height:100%;
min-height:100%;
background-color: #336699;
}#box{
width:61em;
text-align:left;
margin-left:auto;
margin-right:auto;
background-color: #000033;
height:100%;
}#box2{
width:30em;
text-align:left;
margin-left:auto;
margin-right:auto;
background-color: #330033;
height:100%;
}
</STYLE><body>
<div id="box">
<div id="box2">
</div>
</div>
</body>
-
-
Hi!
Hast Du mal an padding gedacht? Du hast es aus html und body entfernt, aber nicht aus box.
-
Hi,
Hast Du mal an padding gedacht? Du hast es aus html und body entfernt, aber nicht aus box.
Abgesehen davon, dass es natuerlich grundsaetzlich stimmt, dass man sich nur auf die Formatierungen *verlassen* kann, zu denen man auch explizit eine Angabe macht - zeig' mir bitte den Browser, in dessen Default-Stylesheet Div ein margin oder padding haette :-)
MfG ChrisB
-
Hiho!
Das mag ja stimmen, aber ein Div{padding:5} irgendwo im CSS bewirkt wunderliche Dinge.Deine Bemerkung hat mich aber mal veranlasst den Code zu probieren.
Antwort:
box2 ist genauso gross wie box. Wenn jetzt noch der Text aus box verschwindet, muss sich box auch nicht mehr vergroessern. Denn jetzt ist box 100% + 1 Zeile.
Manchmal isses auch zu leicht.
-
Hiho!
hoho ;)
Danke erstmal.
box2 ist genauso gross wie box. Wenn jetzt noch der Text aus box verschwindet, muss sich box auch nicht mehr vergroessern. Denn jetzt ist box 100% + 1 Zeile.
Manchmal isses auch zu leicht.
Das verstehe ich nicht, Box ist 100% hoch, mit oder ohne Text!
Box2 hat die gleichen css Angaben wie Box (ausser in der Breite). Ohne Text im HTML wird diese Box gar_nicht angezeigt, mit Text halt nur Zeilenweise.Mit Padding kann ich das Problem nicht lösen.
Grüße
Seppel
-
-
-