nicht angemeldet
Problem mit "height:100%"
0 
MudGuard
0
Problem mit "height:100%"
Hallo,
ich habe hier ein Problem mit der CSS-Eigenschaft height.
Zur verdeutlichung ein kurzes Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style>
html, body{
height:100%;
}
</style>
</head>
<body style="margin:0px;padding:0px;border:1px solid red;">
</body>
</html>
Ich bekomme in gängigen Browsern einen Scrollbar. Sollte die Höhe eines Elementes nicht padding, border und margin einschließen, oder verstehe ich hier was falsch?
Und wie bekomme ich diesen scrollbar weg? (Am besten auch dann, wenn für body noch ein wert füf padding angegeben ist...)
Vielleicht seh ich ja den Wald vor lauter Bäumen nicht...
Rufus
-
Hi,
Ich bekomme in gängigen Browsern einen Scrollbar. Sollte die Höhe eines Elementes nicht padding, border und margin einschließen, oder verstehe ich hier was falsch?
Die CSS-Eigenschaft height bestimmt die Höhe des Inhalts. Padding, border und margin sind NICHT Bestandteil des Inhalts.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Ja, da hast du was falschverstanden:
Das (noch) normale Standard box-sizing Modell sieht vor, dass sich die Gesamtbreit (höhe) aus padding, border und width addiert, nicht, dass padding und border von width abgezogen werden.
-> im IE6 war das so (halt leider ein Bug, da es nicht ach dem Standard war)
-> im IE 7 über Quircksmode, also html declaration weglassen
-> Firefox gehts ganzeinfach über: moz-box-sizing: border-box
-> Webkit (Safari Mac) über: webkit-box-sizing: border-box
-> und sonst vllt über box-sizing: border-boxHab mich mit dem Thema auch erst kürzlich beschäftigt ;-)
Alternativ über Div-Verschachtelung ...-
Danke für die Infos. Scheint ja keine wirklich brauchbare lösung zu geben, bis IEx dann mal CSS3 versteht.
Alternativ über Div-Verschachtelung ...
Schön wäre es...ich hab da so meine Probleme.
Noch ein Beispiel:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style>
html, body, .height100{
height:100%;
/*
box-sizing: border-box;
-moz-box-sizing: border-box;
*/
}
</style>
</head>
<body style="margin:0px;padding:0px;border:none;">
<div class="height100">
<div class="height100" style="border: 1px solid blue;padding:30px">
Scrollbar!
</div>
</div>
</body>
</html>Die Höhenangabe im inneren div richtet sich natürlich nach der inneren Höhe des umgebenden div. Leider kommt natürlich dann noch padding DAZU. Es ist zum heulen. Mit dem (idiotischem?) Modell hat sich die W3C ja nich grad mit Ruhm bekleckert.
Es gibt also mit CSS2 also keinen Weg -beispielsweise- ein seitenfüllendes Dokument imViewport des Browsers zu erzeugen?
Oder kennt jemand die Lösung?-
Hi,
Es gibt also mit CSS2 also keinen Weg -beispielsweise- ein seitenfüllendes Dokument imViewport des Browsers zu erzeugen?
Natuerlich gibt es den - eliminiere bei den Elementen, die du auf exakt 100% Viewporthoehe bringen willst, einfach die margins und paddings.
MfG ChrisB
-
Hi,
Es gibt also mit CSS2 also keinen Weg -beispielsweise- ein seitenfüllendes Dokument imViewport des Browsers zu erzeugen?
Natuerlich gibt es den - eliminiere bei den Elementen, die du auf exakt 100% Viewporthoehe bringen willst, einfach die margins und paddings.
MfG ChrisB
Ok ich formuliere es mal anders:
Wie kann ich innerhalb eines viewportfüllenden Dokumentes (wie man jenes bekommt wissen wir ja schon) ein div anlegen, welches von allen Seiten des Viewports den gleichen Abstand hat?-
Hallo,
Wie kann ich innerhalb eines viewportfüllenden Dokumentes (wie man jenes bekommt wissen wir ja schon) ein div anlegen, welches von allen Seiten des Viewports den gleichen Abstand hat?
dazu müsste der Viewport ja quadratisch sein ôO
Oder suchst du sowas?
Grüße, Matze
-
-
-
-