Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 25.03.2012, 17:24
chris1986m chris1986m ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.03.2012
Beiträge: 1
chris1986m befindet sich auf einem aufstrebenden Ast
Standard 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.


<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
Mit Zitat antworten
Sponsored Links