✔ Problem mit Layout (Header, Sidenav, Content und Footer) - 100% Höhe

Status
Nicht offen für weitere Antworten.
DeMoehn

DeMoehn

Mitglied
Hallo Jungs (und evtl. Mädels)

Ich hab ein kleines Problem mit CSS.
Und zwar soll ich eine Seite designen, bei der nun CSS-DIV's sicherlich angebracht ist (habe vorher nur mit Tabellen gearbeitet).
Ich nutze dafür Dreamweaver CS3.

Das Problem besteht darin, dass das Layout nich 100% hoch sein kann (also mindestens den ganzen Bildschirm. Ich habe hier als grobes Design 5 Div Layer.
Einen in den alles kommt "main", einen "header" eine "sitenav" mit float:left und einen "content" und darunter einen "footer".

Nun soll, falls der Content oder die Sitenav größer ist, der footer nav. weiter nach unten rücken, sind die beiden div's/oder eins zu klein, soll er trotzdem bis zum footer reichen.

Ich kann aber nur erreichen, das entweder content und nav. zwar 100% sind aber der footer nicht "mitläuft" oder das entweder nav oder content 100% sind und der footer "mitläuft"

Ich habe auch schon die Suche benutzt und sehr lange auf eigene Sache herumgetüftelt, habe "Demo-Versionen" probiert uvm.
Letztlich bleibt aber das Problem, die Linke und die Rechte Box schließen nicht zusammen unten ab Ende des Dokuments ab. Und der Footer läuft nicht mit.

Ich hoffe mir kann jemand helfen.

Greetz, DeMoehn (hier im Forum noch: BAdBoYY)

Als Anhang habe ich die Forum.zip mit der .html und der .css

Und hier zum direkt drüber sehen:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Unbenanntes Dokument</title>
                <style type="text/css">
                @charset "utf-8";
                html {
                    height: 100%;
                }
                
                body {
                    height: 100%;
                }
                
                #main {
                    height: 100%;
                    width: 950px;
                    margin: auto;
                    background-color: #000000;
                }
                #main #header {
                    background-color: #0000FF;
                    width: 950px;
                }
                #main #content {
                    width: 670px;
                    height: 100%;
                    padding: 200px 0 0 280px;
                }
                #main #side_nav {
                    height: 100%;
                    padding: 200px 0 0 0;
                    float: left;
                    width: 260px;
                }
                #main #side_nav #side_main {
                    background-color: #00FF00;
                    height: 100%;
                }
                
                
                #main #content #content_main {
                    background-color: #990000;
                    height: 100%;
                }
                
                #main #footer {
                    background-color: #FFFF00;
                    width: 950px;
                }
                .clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
                        clear:both;
                        height:0;
                        font-size: 1px;
                        line-height: 0px;
                }
                
                -->
                </style>
    </head>

    <body>
        <div id="main">
			<div id="header">
				Header
		</div>
		<div id="side_nav">
			<div id="side_main">
				ok
				<br />
				<br />
				</div>
            </div>
            <div id="content">
                <div id="content_main">
                    oke
                    <br />
                    <br />
                    <br />
                     <br class="clearfloat" />
                </div>
			</div>
            <div id="footer">
				Footer
			</div>
		</div>
        </body>
</html>

BAdBoYY
 

Anhänge

Zuletzt bearbeitet:
Omfg, ich frag mich immer wieder wieso ich eigentlich CSS benutze.
Naja, dann muss ich mal schauen, dass das so hin haut.
Hab in meinem wirklichen "main"-DIV schonm ein BG.
Also noch einen DIV Dahinter legen...

Vielen Dank, denke die Antwort war hilfreich.

Sollte ich das Problem somit gelöst haben, dann markiere ich den Thread als Erledigt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück