✔ Layout vertikal über das ganze Browserfenster

[nephix]

Hallo zusammen,

kann mir jemand erklären wie ich in CSS ein <div> über die ganze Seite vertikal ausrichten kann. Also es soll so sein: Wenn wenig Inhalt auf der Seite ist, soll der <div> trozdem bis unten zum Rand des Browsers reichen. Wenn mehr Inhalt auf der Seite ist, soll das auch so sein, jedoch soll man dann scrollen können. Ist irgendwie doof zu erklären ;-)
Bisher hatte ich immer das Problem, das manchmal der Text weiter ging aber der <div> irgendwann aufhörte. Also der Text stand dann außerhalb der <div> wenn ich nach unten gescrollt habe.

nephix

 

[Maik]

Studiere mal den Thread div height=100% nur im IE? und die darin angehängten Lösungsbeispiele.

 

[nephix]

Ah ok danke
Hab das letzte Beispiel von dir genommen und bei mir angepasst, funktioniert nun.
;-)

 

[nephix]

Hm so ganz klappt das bei mir jetzt doch noch nicht
Vielleicht kann ja hier nochmal einer drüber schauen (siehe Anhang)

 

[Maik]

Nach den floatenden DIVs #menu und #content muß wieder der normale Textfluss hergestellt werden:

div.clear {
clear:both;
}

<div id="main">
        <div id="header"></div>

        <div id="menu">
                <div id="menuitem">
                <br />
                <a class="menuitem" href="index.php">Startseite</a><br />
                <a class="menuitem" href="aboutme.php">Über mich</a><br />
                <a class="menuitem" href="index.php">Tutorials</a><br />
                <a class="menuitem" href="index.php">Fotoalbum</a><br />
                <a class="menuitem" href="index.php">Gästebuch</a><br />
                <a class="menuitem" href="index.php">Webdesign</a><br />
                <a class="menuitem" href="index.php">Links</a><br />
                <a class="menuitem" href="index.php">Kontakt</a><br />
                <a class="menuitem" href="index.php">Registrieren</a><br />
                <hr style="color:#990000; margin-right: 10px;" /><form method="post" action="">
                <p>Benutername</p>
                <input name="username" type="text" class="textbox" size="15" />
                <p>Passwort:</p>
                <input name="password" type="text" class="textbox" size="15" /><br /><br />
                <input name="login" type="button" class="button" value="Einloggen" />
                </form>
                <hr style="color:#990000; margin-right: 10px;" /><br />
                <a href="http://www.mozilla.org/firefox/"><img src="getfirefox.gif" border="0"/></a>
                </div>
                <div id="menu_fadeout"></div>
        </div>

        <div id="content">
                <h1>Seitentitel</h1>
                <hr />
                <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
    <p> test 123 </p>
                <br />
        </div>

        <div class="clear">&nbsp;</div>
</div>

Zudem ist die rotmarkierte CSS-Eigenschaft überflüssig und wird ohne Komma notiert:

#main {
            min-height: 100%;
            margin-left: auto;
            margin-right: auto;
            background-color:#FFFFFF;
            width: 768px;
            margin: 0%, 50%;
            padding: 3px;
            padding-left: 0px;
            padding-right: 20px;
            border-left:2px dashed #FF9900;
            border-right:2px dashed #FF9900;
    }

 

[nephix]

Also ich hab das jetzt gemacht aber irgendwie hat sich nichts positiv verändert :-(

 

[Maik]

Bitte lese nochmal meinen letzten Beitrag, den ich nachträglich geändert hatte

Anmerkung: die vertikal zu wiederholende Hintergrundgrafik sollte so breit wie das Layout sein und könnte beispielsweise den linken und rechten Rahmen enthalten.

 

[nephix]

Ah ok das sieht jetzt schon besser aus, danke
Vielleicht noch was kleineres: Wenn ich die Seite im IE öffne ist bei meiner fade_out Grafik dort links unter der Navi noch so ein orangener Strich, wird die Grafik wohl nochmal repeated oder so. Wie bekomm ich das weg? Im Firefox ist das nicht

 

[Maik]

Entferne mal die nicht-benötigte float-Eigenschaft aus dem Selektor, dann verschwindet auch der Strich unter der Grafik, der aus der Hintergrundfarbe des übergeordneten DIVs #menu resultiert:

#menu_fadeout {
            /*float: left;*/ /* auskommentiert = deaktiviert */
            background:url(fadeout.jpg);
            width: 112px;
            height: 60px;
    }

 

[nephix]

Also bei mir ist der Strich dannach immernoch da und der Text vom Content rückt jetzt weiter nach unten. Und im Firefox entsteht dann eine neue, weiße Linie zwischen fadeout und der Navi
Hrhr immer sollche kleinen Probleme *g*