Scroll über div-Elemente hinaus

[Chrisok]

Heyho erstmal,
also ich habe verschachtelte div's für ein page layout alà

<div id="page">
        <div id="header"></div>
        <div id="left_nav"></div>
        <div id="content"></div>
        <div id="footer"></div>
</div>

Soweit auch alles in Ordnung mit CSS ausgerichtet etc...
Mein "Problem" ist jetzt nur, dass über den ganzen Inhalt der Seite hinaus gescrollt werden kann (fast bis zu der doppelten Höhe des eigentlichen Inhalts), was nicht grad schön fürs Auge ist...
Habe in der CSS allem eine Höhe von 100% gegeben...

Was ich eigentlich möchte ist, dass nur der eigentliche Inhalt der Seite angezeigt wird und nicht noch 10 Meter Hintergrund und das sowohl "left_nav" und "content" mitwachsen, wenn entsprechend viel Inhalt drin ist...
Hab einiges per CSS versucht, aber irgendwie schaff ichs nicht...

Soweit erstmal...

 

[prm]

Ein Link wäre für eine Diagnose hilfreich.

 

[Chrisok]

Oke, habe nun bemerkt, dass es an einer php liegt, die ich per include mit eingefügt hatte...
Hier der Link: http://www.chrisok.de/blubb.php

Nun ist allerdings das Problem, dass der footer nicht angezeigt wird...

Naja, momentan ist es ohnehin zu spät für mich..Vielleicht hat ja noch jemand ne Lösung parat zu so später Stunde...^^
Ich wünsche eine gute Nacht allerseits...

 

[neuroleptika]

Mit einem Link auf ein Login kann keiner etwas anfangen.

Habe in der CSS allem eine Höhe von 100% gegeben.

Also so?

* {
height:100%;
}

Das währe alles mit height:100%; und völlig verkehrt.

Vielleicht meinst du das:
Suche > FooterStickAlt

 

[Chrisok]

Ach sry.. War gestern wirklich spät... Hatte vergessen, dass Skript rauszunehmen... -.-

Meinte das nicht so wörtlich... Habe nicht alles eine Höhe von 100% gegeben, aber das kannste ja jetzt auch sehen!

 

[prm]

100% Höhe sind 100% der gesamten Seite.
Die "zusätzliche" bzw. störende Höhe resultiert aus deinem Header.
D.h.
100% #contentHöhe + 180px #header ergibt somit mehr als 100%.

Lösungsansätze:

Gib dem #header auch einen Prozentwert und die differenz zu 100 dann der #navi und dem #content.

Ein weiteres Beispiel wäre dieses: Layout mit 100 % Höhe bei fixiertem Header und Footer

Da könntest du dem #innenwrapper eine geschickte Hintergrundgrafik zuweisen, welche die Trennung zwischen #navi und #content vornimmt, siehe Faux Columns

 

[Chrisok]

Nein, mein Problem ist lediglich nur noch, dass man den footer nicht sieht!

Alles andere konnte ich lösen und ist plausibel!

 

[neuroleptika]

Der footer hat auch keine Höhe, Breite und/oder Innenabstand.
Schreib was rein und du siehst ihn:

id="footer">Footer</div>

 

[Loon3y]

@prm

<div id="header">
<h1>100 % Höhe mit fixiertem Header und Footer</h1>
</div><!--Ende header-->

könnte man nicht das <div> weglassen und <h1 class="header"> machen?

 

[Chrisok]

Hachjaaa... Danke :mrgreen: