Christian S.: 2 Spalten Layout. Spalten bis nach unten.

Hi,

habe ein 2 Spalten CSS Layout.

Das Problem ist, dass bei wenig Inhalt, die Spalten (deren Hintergrund) trotzdem bis nach unten gehen soll.

Also so siehts aus:

--------------------------------
         HEADER
--------------------------------
    |
    |
    |
    |
    |
    |

Um die Spalten hab ich noch mal ein Div gelegt, ihm die bgcolor der linken Spalte gegeben, damit visuell der Effekt entsteht, dass beide Spalten immer gleich lang sind.
Die linke Spalte ist mit float: left und einer Breite ausgestattet. die rechte Spalte mit einem margin-left.

Die Seite hat keinen Footer o.ä. Ist das Browserfenster nun größer als der Inhalt der Spalten sollen die Hintergründe trotzdem fortgeführt werden, da weißer Hintergrund ja scheiße aussieht...

Hab im Netz als einzige Lösung gefunden, dass man die Spalten als image nachbaut und body diese als background-image gibt.
Aber schön ist das nicht. Wenn sich mal die Breite der linken spalte ändert, dann muss man ja direkt alles ändern...

Habe auch versucht, allen elementen (html, body spaltencontainer und rechts spalte) eine Höhe von 100% zu geben.
Dann tritt zwar fast der gewünschte Effekt auf. Aber es entstehen immer Scrollbalken. Die Seite scheint dann nach unten hin noch mal um die Höhe des Headers verlängert zu sein.

Gibts auch was einfacheres mit CSS??

Gruß
Christian

  1. Hi,

    beim float weiss tatsächlich das eine Element nichts vom anderen.

    Der Ansatz, den gemeinsamen Hintergrund einzufärben, ist schon mal gut. Dann gib doch dem linken Element einen farbigen border-right und dem rechten einen border-left in derselben Farbe.

    Das kommt dann ungefähr hin, nur ist der Mittelstreifen dort etwas breiter, wo beide Elemente sind.

    Und height:100% bezieht sich auf ein Elternelement, das selbst eine _definierte- Höhe hat. Im Zweifel ist das body und 100% ist dann die Höhe des Fensters.

    Kalle

    1. Hi,

      beim float weiss tatsächlich das eine Element nichts vom anderen.

      Der Ansatz, den gemeinsamen Hintergrund einzufärben, ist schon mal gut. Dann gib doch dem linken Element einen farbigen border-right und dem rechten einen border-left in derselben Farbe.

      Das kommt dann ungefähr hin, nur ist der Mittelstreifen dort etwas breiter, wo beide Elemente sind.

      Und height:100% bezieht sich auf ein Elternelement, das selbst eine _definierte- Höhe hat. Im Zweifel ist das body und 100% ist dann die Höhe des Fensters.

      Kalle

      irgendwie beantwortet das nicht meine Frage...

      1. irgendwie beantwortet das nicht meine Frage...

        Gibts auch was einfacheres mit CSS??

        Ja, hier. der äussere div hat eine definierte Höhe:

        <div style='width:51em; height:20em; border:1px solid #f00; background:#fcc'>
          <div style='height:100%; width:20em; border:1px solid #00a; background:#ccf; float:left'>
          <div>
            links links links links links links links links links links links links links links links links links links links links
            links links links links links links links links links links links links links links links links links links links links
            links links links links links links links links links links links links links links links links links links links links
          </div>
          </div>
          <div style='height:100%; width:30em; border:1px solid #080; background:#cfc; float:right'>
          <div>
            rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts
            rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts
            rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts
            rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts
            rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts rechts links links links
          </div>
          </div>
        </div>

        Kalle

        1. Hi,

          Ja, hier. der äussere div hat eine definierte Höhe:

          naja, genau das will ich ja nicht. sondern er müsste die fensterhöhe haben.

          Ich habs jetzt noch mal soweit, dass ich alle Elternelement auf 100% gesetzt habe:

          html
          {
           height: 100%;
          }
          body
          {
           margin: 0px;
           height: 100%;
          }

          #container1
          {
           height: 100%;
          }

          [...]
           <div id="header">
           </div>

          <div id="container1">
            <div id="container2">

          <div id="navigation">
              Navigation
             </div>
             <div id="content">
              Content
             </div>
             <div id="clearer"></div>
            </div>
           </div>

          klappt auch fast. container1 nimmt dann genau die Fensterhöhe ein.
          Problem ist dann der header. dadurch entstehen scrollbars, man kann dann um die höhe des headers nach unten scrollen.

          Idee: header absolute positionieren, und container1 ein padding-top in der höhe des headers geben... aber hilft nicht..

          1. Idee: header absolute positionieren, und container1 ein padding-top in der höhe des headers geben... aber hilft nicht..

            Nöö, padding _kann_ zusätzlich sein, je nach Browser. Siehe meinen Thread https://forum.selfhtml.org/?t=147071&m=954371

            und das Beispiel dazu:
            http://osmer.de/test.htm

            Andere Idee: Header 20%, Body 80%

            Kalle

  2. Hey,

    die Spalten (deren Hintergrund) trotzdem bis nach unten gehen soll.

    http://alistapart.com/articles/multicolumnlayouts

    --
    水-金-地-火-木-土-天-海-冥