Markus: height:100%

Hallo Forum,

hab nur eine kleine Frage die wahrscheinlich schon ein paarmal gestellt wurde (hab aber nichts gefunden).

Nehmen wir an ich habe folgende Seite:

<div id="contäiner">

<div id="header"></div>
<div id="content"></div>
<div id="linklist"></div>

</div>

Wie schaff ich es das der container oder die linkliste immer bis zum unteren Rand der Seite angezeigt wird. Also wie bei Tabellen height:100%. Geht das?

Wäre für ein paar hilfreiche Links oder Erklärungen dankbar.

Danke
Markus

  1. Moinsen,

    Nutze doch erstmal die Suche

    --
    cu,
    Maz
    1. Hi Markus,

      Die Suche hilft da auch nicht weiter, da es keine generelle Lösung
      dafür gibt. Da ich nicht weiß, wie dein Layout aussehen soll,
      kann ich nicht sagen, ob es geht.

      Vielleicht hilft dir dieses Beispiel weiter.

      1. Hallo mark,

        Vielleicht hilft dir dieses Beispiel weiter.

        oder mein vielgeliebtes "think outside the box" :-)

        Gruß aus Köln-Ehrenfeld,

        Elya

        --
        „Mac OS X wird weiterhin nur auf Macs aus dem Hause Apple laufen, egal, ob da nun ein PowerPC, ein Pentium oder Chocolate Chips drinstecken.“ (Tim Tepaße)
      2. Moinsen,

        Die Suche hilft da auch nicht weiter, da es keine generelle Lösung
        dafür gibt.

        und das kann man inklusive des Stunicholls-Link auch in den dutzenden vorangegangenen Threads nachlesen, vielleicht nicht so oft wie die Frage wie man mit einem Link 2 frames anspricht, aber fast ;-)

        Vielleicht hilft dir dieses Beispiel weiter.

        --
        cu,
        Maz
        1. und das kann man inklusive des Stunicholls-Link auch in den dutzenden
          vorangegangenen Threads nachlesen,

          Was sind "Stunicholls-Links"?

          vielleicht nicht so oft wie die Frage wie
          man mit einem Link 2 frames anspricht, aber fast ;-)

          Mit dem einzigen Unterschied, dass es für die 2-Link-Frames-Frage
          eine Antwort gibt. Für das Layout:

          --------------------------
          |                        |
          --------------------------
          |      |           |     | 100%
          |      |           |     |
          |      |           |     |
          |      |           |     |
          --------------------------

          gibt es einfach keine passable Lösung in CSS ohne Tabellen.

          1. Moinsen,

            Für das Layout:



            gibt es einfach keine passable Lösung in CSS ohne Tabellen.

            doch, nur anders als mit Tabellen. Schau mal in die bereits geposteten Links. Der Stunicholls Link ist einer davon, an der URL als solcher erkennbar.

            --
            cu,
            Maz
            1. doch, nur anders als mit Tabellen. Schau mal in die bereits geposteten
              Links. Der Stunicholls Link ist einer davon, an der URL als solcher
              erkennbar.

              Wo ist dieser Link?

              Alle diesbezüglichen Lösungen habe ich mir schon angesehen
              und fand keines 100%-tig zufriedenstellend.

              1. Moinsen,

                Wo ist dieser Link?

                kannst Du vielleicht zwei posts vorgehen und selber gucken? Der Stunicholls-Link ist der mit stunicholls in der URL... Der wurde einmal von einem vor mir und dann nochmal im meiner Antwort im Zitat dazu wiederholt.

                Alle diesbezüglichen Lösungen habe ich mir schon angesehen
                und fand keines 100%-tig zufriedenstellend.

                Es funktioniert aber. Haufenweise gute Seiten machen das. Was Dich daran stört kann ich nicht nachvollziehen, aber Tabellen als Layoutmittel sind wirklich nicht zufriedenstellend.

                --
                cu,
                Maz
                1. Moinsen,

                  Es funktioniert aber. Haufenweise gute Seiten machen das. Was Dich daran
                  stört kann ich nicht nachvollziehen, aber Tabellen als Layoutmittel sind
                  wirklich nicht zufriedenstellend.

                  Welche Seite haben dieses Layout mit CSS gelöst?

                  Links?

                  1. Moinsen,

                    Welche Seite haben dieses Layout mit CSS gelöst?

                    so ziemlich alle Seiten, die auf Tabellen als Layoutmittel verzichten.

                    Links?

                    hier standen schon einige, die Dir über die Strasse helfen sollten. Offenbar hast Du die entweder nicht breachtet oder Dich nicht mit denen beschäftig. Natürlich musst Du erstmal grundsätzlich verstehen, wie ein "DIV-Layout" funktioniert und welche anderen Herangehensweisen dazu gehören.

                    --
                    cu,
                    Maz
                    1. Hi maz,

                      so ziemlich alle Seiten, die auf Tabellen als Layoutmittel verzichten.

                      Mit dem oben besprochenen Layout?

                      hier standen schon einige, die Dir über die Strasse helfen sollten. Offenbar
                      hast Du die entweder nicht breachtet oder Dich nicht mit denen beschäftig.

                      Doch, aber ich habe bis dato _keine_ Seite gesehen, die dieses
                      (und ich meine _dieses_) Layout mit Hilfe von CSS gelöst haben.

                      Natürlich musst Du erstmal grundsätzlich verstehen, wie ein "DIV-Layout"
                      funktioniert und welche anderen Herangehensweisen dazu gehören.

                      Sehr witzig, ich kenne CSS und ich _weiß_, dass es keine
                      zufriedenstellende Lösung für _dieses_ Layouproblem gibt.

                      Wenn ja, poste doch bitte (_bitte_) einen Link und verweise
                      nicht immer auf irgendwelche ominösen Posting.

                      1. Moinsen,

                        probier das mal (das Prinzip hab ich aus dem css4you Forum):

                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                          "http://www.w3.org/TR/html4/loose.dtd">
                        <html>
                        <head>
                        <title>Nav</title>
                        <style type="text/css">
                        *{
                        padding:0;
                        margin:0;
                        }
                        html, body {height:100%}
                        #wrapper {
                        min-height:100%; /* für standardkonforme Browser */
                        width: 70%;
                        border: 1px solid #000;
                        }
                        * html #wrapper {
                        height:100%;/* für IE */
                        }
                        #eins, #zwei, #drei{
                        float: left;
                        width: 33%;
                        }
                        .clear{
                        clear: both;
                        }
                        </style>
                        </head>
                        <body>
                        <div id="wrapper">
                        <div id="eins">test</div>
                        <div id="zwei">test</div>
                        <div id="drei">test</div>
                        <p class=clear"></p>
                        </div>
                        </body>
                        </html>

                        --
                        cu,
                        Maz
                        1. Hi Maz,

                          Das Beispiel kenne ich auch. Wenn man für die DIVs
                          noch background-color:#f00; einsetzt
                          sieht man auch, dass dieses Beispiel nicht im IE 6 funktioniert.

                          Bitte keine Antwort, dass der IE 6 nicht standardkonform ist.

                          Das ist doch meine Intention. Das es mit derzeitigen Browsern
                          und CSS _nicht_ geht. Das es gehen _sollte_ ist doch eine
                          ganz andere Frage.

                          Hintergrund ist doch, da sitzt ein Großkunde, der hat irgendwo
                          den Hype-Begriff "barrierefrei" aufgeschnappt und möchte sein
                          Layout so umgemodelt haben. Und sein Layout ist nunmal so und
                          lässt sich nicht für alle aktuellen Browser mit CSS umsetzen.

                          Darum geht es.

                          1. Moinsen,

                            Das Beispiel kenne ich auch. Wenn man für die DIVs
                            noch background-color:#f00; einsetzt
                            sieht man auch, dass dieses Beispiel nicht im IE 6 funktioniert.

                            das kann ich auf meinem 6er IE nicht nachvollziehen. Alles ist dort schön rot.

                            Hintergrund ist doch, da sitzt ein Großkunde, der hat irgendwo
                            den Hype-Begriff "barrierefrei" aufgeschnappt und möchte sein
                            Layout so umgemodelt haben. Und sein Layout ist nunmal so und
                            lässt sich nicht für alle aktuellen Browser mit CSS umsetzen.

                            was ist mit dem Link aus Struppis post (der mit absoluter Positionierung zur Lösung)?

                            --
                            cu,
                            Maz
                            1. Hi Maz,

                              was ist mit dem Link aus Struppis post (der mit absoluter Positionierung
                              zur Lösung)?

                              Ja der erste benutzt den Trick mit dem Bild im Background und der zweite
                              sieht ganz gut aus, außer das der IE manchmal eine grüne vertikale Linie
                              am rechten Bildrand zeigt.

                              Das ist bis jetzt das brauchbarste (aber nicht perfekte) Ergebnis.

                              Warum gibt es in SelfHTML nicht eine Rubrik brauchbare Codeschnipsel
                              (HTML, CSS, Javascript etc.) oder gibt es das schon?

                              1. Moinsen,

                                Warum gibt es in SelfHTML nicht eine Rubrik brauchbare Codeschnipsel
                                (HTML, CSS, Javascript etc.) oder gibt es das schon?

                                gute Idee, eigentlich.
                                Ansonsten -wenn ich mal kurz ein fremdes Forum verlinken darf- ist hier ne ziemlich gute "Knowledge base": http://www.xhtmlforum.de/viewforum.php?f=11

                                --
                                cu,
                                Maz
                2. Hi,

                  Es funktioniert aber. Haufenweise gute Seiten machen das. Was Dich daran stört kann ich nicht nachvollziehen

                  ich schon. Seiteninterne Scrollbalken nur um eine 100%-Höhe zu erzielen sind Murks.

                  freundliche Grüße
                  Ingo

          2. Mit dem einzigen Unterschied, dass es für die 2-Link-Frames-Frage
            eine Antwort gibt. Für das Layout:



            gibt es einfach keine passable Lösung in CSS ohne Tabellen.

            Das hast du doch schon einmal behauptet und hier wurde dir das wiederlegt
            http://javascript.jstruebig.de/test/test-3-spalten.html
            http://d-graff.de/demos/selfhtml/kopfunddreispalten1.html

            Das sind sehr passable Lösungen.

            Struppi.

  2. Hallo,

    hab nur eine kleine Frage die wahrscheinlich schon ein paarmal gestellt wurde (hab aber nichts gefunden).

    mit der Such-Funktion solltest du u.a. Beispiele finden wie durch
    Hintergrundbilder des body volle Spaltenlängen simuliert werdern.

    Wie schaff ich es das der container oder die linkliste immer bis zum unteren Rand der Seite angezeigt wird. Also wie bei Tabellen height:100%. Geht das?

    Zusätzlich zu den Hintergrundspielereien kannst du noch versuchen
    wie in diesem Beispiel  Tableless Layout mit min-height 100%
    wenigstens den content auf volle Höhe zu bringen, damit z.B. die
    Fußzeile bei wenig Inhalt nicht per position:absolute fixiert
    werden muß.

    Grüsse

    Cyx23

  3. Hi there,

    <div id="contäiner">

    etwas off topic: id kann nie "contäiner" sein, nur "container"...