Ergebnis 1 bis 2 von 2

Thema: DIV bis auf 100% zum Seitenende auffüllen

  1. #1
    Antispy
    Gast

    Standard DIV bis auf 100% zum Seitenende auffüllen

    Hallo Zusammen,

    ich habe schon sehr viele Forenbeiträge hier durchgelesen und über Google viele Ratschläge versucht, aber ich bekomme mein Vorhaben leider nicht umgesetzt.

    Und zwar versuche ich ein Ergebnis wie hier(http://s7.directupload.net/file/d/2986/e654g5aj_png.htm) gezeigt zu erzielen. Ich habe oben eine Bannerleiste, wo ein Logo angezeigt wird. Danach wird die Webseite in 3 Bereiche unterteilt: sidebar_left, content, sidebar_right.

    sidebar_left und sidebar_right sollen eine feste Breite haben. Content soll sich dynamisch der Restbreite anpassen. Dieses funktioniert auch!

    Das Problem ist, dass ich die Höhe nicht dynamisch aufgefüllt bekomme. Der content Bereich ist sowieso weiß gehalten, weswegen das hier nicht so auffällt (sollte aber trotzdem bis zum Ende gehen), aber die beiden sidebars (welche später die Menüs darstellen sollen) füllen sich leider nicht bis zum Ende.

    Deswegen sind bei mir im folgenden CSS Teil auch schon Unterschiede in den sidebars zu sehen. Die linke Sidebar habe ich versucht mit einer 1px großen Grafik aufzubauen, die rechten mittels Farbcode. Natürlich würde mir die Variante per Farbcode besser gefallen, aber die andere Lösung ist auch OK. Hauptsache ist, ich bekomme eine Lösung zum Laufen *grins* was momentan noch meine größte Sorge ist.

    Ich habe in der Grafik alles "rot" markiert was leider nicht funktioniert und würde mich freuen, wenn dort einer einen Blick drauf werfen könnte.
    Das Problem besteht "immer" wenn so viel Text enthalten ist, dass man scrollen muss. Wenn man nicht scrollen muss, dann sieht alles OK ist.

    Das Bild gibt es hier: http://s7.directupload.net/file/d/2986/e654g5aj_png.htm

    Vielen lieben Dank!

    Antispy

    Anbei der HTML Code:
    </html>
    </head>
    <body>

    <div id="logo">logo</div>

    <div id="sidebar_left">
    <h2>sidebar_left</h2>
    </div>

    <div id="content">
    <h1>content</h1>
    </div>

    <div id="sidebar_right">
    <h2>sidebar_right</h2>
    </div>

    </body>
    </html>


    Und der CSS Teil:
    html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
    }

    /* LOGO */

    #logo {
    width: 100%;
    height: 220px;
    margin: 0 auto;
    background: url(../images/logo.png);
    background-repeat:no-repeat;
    background-color:#ffffff;
    }

    /* Sidebar Left */

    #sidebar_left {
    font-family:'Conv_Helvetica-Condensed-Bold',Sans-Serif;
    font-size: 16pt;
    position: absolute;
    top: 220px; /* = Höhe des LOGO-Blockes */
    left: 0;
    bottom: 0;
    width: 220px;
    background-color:#eaeef7;
    }

    #sidebar_left ul {
    margin: 0;
    padding: 20px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    }

    #sidebar_left li {
    }

    #sidebar_left li:hover {
    }

    #sidebar_left a {
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    color: #10448a;
    display: block;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0px 10px 10px 30px;
    }

    #sidebar_left a:hover {
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    color: #ffffff;
    display: block;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0px 10px 10px 30px;
    background-color: #d4021d;
    }

    /* Sidebar Right */

    #sidebar_right {
    font-family:'Conv_Helvetica-Condensed',Sans-Serif;
    font-size: 12pt;
    position: absolute;
    top: 220px; /* = Höhe des LOGO-Blockes */
    right: 0;
    bottom: 0;
    width: 250px;
    background-color:#eaeef7;
    padding-left: 10px;
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    color: #10448a;
    font-size: 10pt;
    }

    #sidebar_right ul {
    margin: 0;
    padding: 10px 0px 0px 0px;
    list-style: none;
    line-height: normal;
    }

    #sidebar_right li {
    margin-bottom: 2px;
    padding: 0 2px 2px 0px;
    }

    #sidebar_right a {
    text-align: left;
    text-decoration: none;
    font-weight: bold;
    font-size: 11pt;
    color: #10448a;
    }

    /* Content */

    #content {
    position: absolute;
    top: 220px; /* = Höhe des LOGO-Blockes */
    left: 220px; /* = Breite des SIDEBAR_LEFT-Blockes */
    right: 250px; /* = Breite des SIDEBAR_RIGHT-Blockes */
    bottom: 0;
    background: #ffffff;
    font-family:'Conv_Helvetica-Condensed',Sans-Serif;
    color: #10448a;
    margin-left: 50px;
    margin-right: 50px;
    }

    #content_startpage {
    position: absolute;
    top: 220px; /* = Höhe des LOGO-Blockes */
    left: 220px; /* = Breite des SIDEBAR_LEFT-Blockes */
    right: 250px; /* = Breite des SIDEBAR_RIGHT-Blockes */
    bottom: 0;
    background: #eaeef7;
    z-index: 2;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: DIV bis auf 100% zum Seitenende auffüllen

    Faux Columns ist das Stichwort,
    http://www.gipspferd.de/css/anleitung/a18/a18.php

Ähnliche Themen

  1. Resthöhe "auffüllen"
    Von Dede4 im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 05.11.2004, 12:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •