Div height:100% aber warum der Scrollbalken?

Status
Nicht offen für weitere Antworten.
F

flogag

Mitglied
Code: 
<style>

body {background:#3B5C79;margin:0;padding:0;text-align:center;height:100%}

#pageWrapper {background:#294155;border-left:8px solid #4E799F;border-right:8px solid #4E799F;padding:0 2px 0 2px;width:800px;margin:0 auto 0 auto;height:100%}
#contentWrapper {background:#FFFFFF;padding: 12px 0 0 0;margin:0 auto 0 auto;;height:100%}

#go-logo {background:url(go-logo_height.png) no-repeat;height:93;width:441px;margin:0 auto 0 auto}

</style>

<body>

	<div id="pageWrapper">
		<div id="contentWrapper">
			<div id="content">
				<div id="go-logo"></div>
			</div>
		</div>
	</div>

</body>

Warum ist denn die Seite höher als das Fenster. Ich habe dem Body doch die 100% gegeben und demnach müsste sich auch das Div danach richten!?
 
Hallo flogag,

falls dein Dokument W3C-standardkonform ist, dann bezieht sich die CSS-Eigenschaft height:100% auf den Inhalt des entsprechenden DIV-Blockes. Da du jetzt aber noch Polsterungseigenschaften verwendest (z.B. padding: 12px 0 0 0;), vergrößerst du die Box um diese Werte.
Siehe Boxmodell.
 
Ah danke für die Antwort.
Also verstehe ich das richtig, dass wenn ich das ganze mit top:12px; positioniere, passiert das nicht?

Gibt es da denn eine Lösung, dass ich das padding beibehalten kann?
 
Solange du einen DIV-Block mit der Eigenschaft height:100% versiehst, ist dessen Inhalt ebenso groß wie das Elternelement (hier: body).

Du könntest beispielsweise die Box-in-a-box-Technik anwenden, wo in den DIV-Container mit diskreter Höhe noch ein (unsichtbarer) innerer DIV-Block mit der Eigenschaft height:auto; untergebracht wird, der die entsprechenden Polsterungseigenschaften und den weiteren Inhalt trägt.
 
Zuletzt bearbeitet:
Ah super Danke! Bin jetzt schlauer.
Ich hab das ganze jetzt so gelöst, falls es jmd. interessiert:

Code: 
<style>

body {background:#3B5C79;margin:0;padding:0;text-align:center;height:100%}

#pageWrapper {background:#294155;border-left:8px solid #4E799F;border-right:8px solid #4E799F;padding:0 2px 0 2px;width:800px;margin:0 auto 0 auto;height:100%}
#contentWrapper {background:#FFFFFF;height:100%}
#content {background:#FFFFFF;padding: 12px 0 0 0;margin:0 auto 0 auto}

#go-logo {background:url(go-logo_height.png) no-repeat;height:93;width:441px;margin:0 auto 0 auto}

</style>

<body>

	<div id="pageWrapper">
		<div id="contentWrapper">
			<div id="content">
				<div id="go-logo"></div>
			</div>
		</div>
	</div>

</body>

Leider Intapretiert der Safari das ganze nicht richtig. Er ignoriert die Höhenangaben.
 
Wie? Auch hinter die Prozentwerte? Das kann doch nicht Funktionieren. Ich hab beim #go-logo "px" vergessen, ja, aber das ändert nichts wenn ich es zufüge.
 
Hi,

versuch mal dem Viewport (html) ebenfalls die Höhe von 100 Prozent zuzuweisen.
Code: 
html{ height: 100%;}
Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück