Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2007 Teil von November

SELFHTML Forumsarchiv
Problem mit "height:100%"

Informationsseite
  1. Seite (CSS) Problem mit "height:100%" von Rufus, 29. 11. 2007, 21:42
nach unten

Problem mit "height:100%"

Die folgende Nachricht zum Thema stammt von: Rufus, 29. 11. 2007, 21:42

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

nach obennach unten

Problem mit "height:100%"

Die folgende Nachricht zum Thema stammt von: MudGuard, 29. 11. 2007, 21:46

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.

nach obennach unten

Problem mit "height:100%"

Die folgende Nachricht zum Thema stammt von: Tux, 29. 11. 2007, 21:49

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-box

Hab mich mit dem Thema auch erst kürzlich beschäftigt ;-)
Alternativ über Div-Verschachtelung ...

nach obennach unten

Problem mit "height:100%"

Die folgende Nachricht zum Thema stammt von: Rufus, 29. 11. 2007, 22:42

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?

nach obennach unten

Problem mit "height:100%"

Die folgende Nachricht zum Thema stammt von: ChrisB, 29. 11. 2007, 22:43

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

nach obennach unten

Problem mit "height:100%"

Die folgende Nachricht zum Thema stammt von: Rufus, 29. 11. 2007, 22:52

»» 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?

nach obennach unten

Problem mit "height:100%"

Die folgende Nachricht zum Thema stammt von: Matze, 30. 11. 2007, 11:10

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

nach oben
Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2007 Teil von November

© 1998-2006 Seite Impressum, Software: Classic Forum