XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   min-height:100 nur für contentbereich (http://xhtmlforum.de/showthread.php?t=67141)

chris1986m 25.03.2012 17:24

min-height:100 nur für contentbereich
 
Hallo,

ich bin jetzt seit ca. 2 Tagen am suchen einer Lösung für mein Problem.

Meine Internetseite soll eine 100% Höhe erhalten. Jedoch gibt es dort bei mir ein paar spezielle Dinge, die ich nicht umsetzen kann.

Ich versuche es mal abgespeckt und vereinfacht darzustellen.
http://www7.pic-upload.de/thumb/25.0...wedxbv54og.png

<body>
<construct>
<header></header>
<content>Inhalt via PHP</content>
<footer></footer>
</construct>
</body>

Der Hintergrund von body ist ein Verlauf der sich über den gesamten Viewport erstreckt.

Construct ist ein div, welcher nur als zweiter body dient und alles zusammenhält.

In header befindet sich unteranderen die Navigation welche aus Tabs besteht und somit kein Hintergrund hat. (Nimmt den Hintergrundverlauf von body an). Damit es so aussieht, als würden die Tabs der Navigation oben am Content sitzen.

Content soll sich bis zum Browserende skalieren. Der noch existierende Footer ist ein anderes Thema, da dieser absolute bottom positioniert ist, ist dies nicht das Problem.
Für den Contentbereich, habe ich ein 1px hohes Hintergrundbild mit Schatten, welches nach unten repeatet wird.

Das funktioniert alles auch ganz gut. Nur leider habe ich das Problem, das sich der Contentbereich via min-height:100% zu groß skaliert. Die komplette Höhe des Headers (35px + 40 padding-top) wird unten außerhalb des Viewport mit Scrollbars angezeigt. Egal was ich mache (margin / padding -+) bringt alles nichts. Weniger wird der Contentbereich nicht, es kommt wenn nur mehr hinzu...

Ich habe schon etliche Tutorials durch und komme einfach nicht weiter. Überall steht, dass man das repeatete 1px Hintergrundbild mit Schatten auf den <construct> legen soll, wenn dieser eine min-height:100% hat. Ja das ist auch korrekt, jedoch nur für "einfache" Designs. Wenn ich das mache, wird mein gesamter Header und auch Footer von dieser Hintergrundgrafik betroffen, obwohl dieser keinen Hintergrund hat.
Es muss doch eine Lösung geben, dass ich nur den contentbereich auf min-height:100% habe und header und footer korrekt ohne Scrollbars angezeigt werden. Außerdem will ich, dass sich der Content nicht am Inhalt orientiert, sonder an der Höhe des Viewports.

Ich hoffe ihr könnt mein Problem ein bisschen nachvollziehen.

Viele Grüße
Chris

gato 25.03.2012 18:18

Zitat:

Zitat von chris1986m (Beitrag 513316)
Ich versuche es mal abgespeckt und vereinfacht darzustellen.

Der (vollständige) Quelltext deines Versuches wäre um einiges hilfreicher. Aber seis drum.

So wie du dir das vorstellst ist das ganze momentan nicht machbar.

Möglich ist eine Lösung, bei der die Kopf- und Fußbereiche nicht mitscrollen. Das kannst du ähnlich umsetzen wie in einem anderen Thread bereits beschrieben.

Nebenbei: Warum dein Versuch nicht funktionieren kann, wirst du verstehen, wenn du verstanden hast, wie sich die Gesamthöhe eines Elements berechnet.


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:07 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020