# Div height:100% aber warum der Scrollbalken?



## flogag (10. Oktober 2005)

```
<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!?


----------



## hela (10. Oktober 2005)

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.


----------



## flogag (10. Oktober 2005)

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?


----------



## hela (10. Oktober 2005)

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.


----------



## flogag (12. Oktober 2005)

Ah super Danke! Bin jetzt schlauer.
Ich hab das ganze jetzt so gelöst, falls es jmd. interessiert:


```
<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.


----------



## Fiberman (12. Oktober 2005)

setz mal überall an die Höhenangaben px dahinter, dann sollte es auch funktionieren!

Gruß


----------



## flogag (12. Oktober 2005)

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.


----------



## Quaese (12. Oktober 2005)

Hi,

versuch mal dem Viewport (html) ebenfalls die Höhe von 100 Prozent zuzuweisen.

```
html{ height: 100%;}
```
Ciao
Quaese


----------

