Dominik Amon: min-height:page ?

Hallo

Ich habe ein paar DIV-Tags die parallel neben einander liegen. In einem davon habe ich den eigentlichen Content der über eine Bildschirmseite hinweg geht (variable länge).

Ich möchte/muss die Div-Tags die neben dem Content liegen, genau so hoch machen wie dieses Conent-Div

mit height geht es über eine Bildschirmseite, min-height zieht nicht, weil der Inhalt der "Paralell"-Divs ja nicht die selbe Länge des Contentdivs haben.

Gibt es sowas in der Richtung wie min-height:page (bis zum Ende der Seite, nicht des Bildschirms) oder sowas ähnliches?

Danke für Infos,
dominik

  1. Hi,

    Ich habe ein paar DIV-Tags die parallel neben einander liegen. In einem davon habe ich den eigentlichen Content der über eine Bildschirmseite hinweg geht (variable länge).

    Ich möchte/muss die Div-Tags die neben dem Content liegen, genau so hoch machen wie dieses Conent-Div

    mit height geht es über eine Bildschirmseite, min-height zieht nicht, weil der Inhalt der "Paralell"-Divs ja nicht die selbe Länge des Contentdivs haben.

    Gibt es sowas in der Richtung wie min-height:page (bis zum Ende der Seite, nicht des Bildschirms) oder sowas ähnliches?

    du kannst beide divs in ein übergeordnetes div reintun und dem height:100%; zuweisen. Das andere zieht durch seinen Inhalt das übergeordnete div soweit in die Länge wie nötig.

    Schöne Grüße
    Julian

    1. Hallo

      du kannst beide divs in ein übergeordnetes div reintun und dem height:100%; zuweisen. Das andere zieht durch seinen Inhalt das übergeordnete div soweit in die Länge wie nötig.

      hab deinen Vorschlag mal probiert, hat leider nicht geklappt:
      http://www.amon.cc/Projects/proofofconcept/DivElement.htm

      Wenn du dir die Seite mit dem IE ansiehst, geht auf der linken seite, der Rote balken bis ans Ende der Seite (gewünschter Effekt)

      das versuche ich mit dem Firefox auch hinzubekommen - hat aber leider nicht geklappt :-(

      danke für Infos,
      dominik

      1. Hi,

        das versuche ich mit dem Firefox auch hinzubekommen - hat aber leider nicht geklappt :-(

        display:table-cell für die benachbarten divs

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. hallo

          display:table-cell für die benachbarten divs

          klappt nicht, Beispiel aktualisiert:
          http://www.amon.cc/Projects/proofofconcept/DivElement.htm

          lg,
          dominik

          1. Hi,

            display:table-cell für die benachbarten divs
            klappt nicht, Beispiel aktualisiert:
            http://www.amon.cc/Projects/proofofconcept/DivElement.htm

            Irgendwas machst Du falsch:

              
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
            <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Testseite</title>  
            <style type="text/css">  
            #c1,#c2,#c3 { display:table-cell; border:3px solid red; }  
            </style>  
            </head><body>  
            <div id="c1">wenig Text</div><div id="c2">viel Text</div><div id="c3">wenig Text</div>  
            </body>  
            
            

            erzeugt im Firefox drei gleich hohe Boxen, auch wenn unterschiedliche Textmengen in den divs stecken.

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            O o ostern ...
            Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            1. Hallo!

              Das entspricht eh in etwa dem, was in der SelfHTML Doku steht - Rufst du dein Codebeispiel jetzt wieder mit dem Internet Explorer auf, sind die drei Divs wieder untereinander :-(

              lg,
              dominik

              1. Hi,

                Das entspricht eh in etwa dem, was in der SelfHTML Doku steht - Rufst du dein Codebeispiel jetzt wieder mit dem Internet Explorer auf, sind die drei Divs wieder untereinander :-(

                Natürlich - der IE ist zu blöd für display:table-cell.
                Aber für den IE hattest Du doch schon eine Lösung.

                Kombiniere die beiden mit einer entsprechenden CSS-Weiche.

                cu,
                Andreas

                --
                Warum nennt sich Andreas hier MudGuard?
                Schreinerei Waechter
                O o ostern ...
                Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        2. Hello out there!

          display:table-cell für die benachbarten divs

          Das wirkt AFAIK nur, wenn die display-Eigenschaft eines Vorfahrenelements den Wert 'table' hat.

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          1. Hallo

            Das wirkt AFAIK nur, wenn die display-Eigenschaft eines Vorfahrenelements den Wert 'table' hat.

            es funktioniert auch nicht in meinem Beispiel :-(

            lg,
            dominik

            1. Hello out there!

              es funktioniert auch nicht in meinem Beispiel :-(

              Ach, und die display-Eigenschaft welches Elements hat bei dir den Wert 'table'?

              Übersichtlicher Quelltext wäre auch hilfreich. Verzichte auf style-Attribute; notiere sämtliche Angaben gesammelt im zentralen Stylesheet (style-Element oder externe Datei).

              See ya up the road,
              Gunnar

              --
              “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
              1. Ich habe mir den entsprechenden Eintrag aus der SelfHTML Doku rausgesucht:
                http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

                bzw.
                http://de.selfhtml.org/css/eigenschaften/anzeige/display2.htm

                Funktioniert nur im Mozilla, aber wieder nicht im Internet Explorer - Sobald man hier float:left definiert, funktionierts auch schon wieder nicht mehr :-(

          2. Hi,

            display:table-cell für die benachbarten divs
            Das wirkt AFAIK nur, wenn die display-Eigenschaft eines Vorfahrenelements den Wert 'table' hat.

            Nö.
            http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes sagt doch explizit, daß die fehlenden Elemente automatisch erzeugt werden ...

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            O o ostern ...
            Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            1. Hello out there!

              http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes sagt doch explizit, daß die fehlenden Elemente automatisch erzeugt werden ...

              Wieder was gelernt. Ich war dieser Meinung, weil die vertikale Zentrierung so funktioniert:

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
              <html xmlns="http://www.w3.org/1999/xhtml">  
                <head>  
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
                  <title>TEST</title>  
                  <style type="text/css">  
              [code lang=css]      body, html {  
                      height: 100%;  
                      margin: 0;  
                      padding: 0;  
                    }  
                    body {  
                      display: table-cell;  
                      vertical-align: middle;  
                    }  
                    html {  
                      display: table;  
                    }
              

              </style>
                </head>
                <body>
                  <p>foo</p>
                </body>
              </html>[/code]

              ohne

                    html {  
                      display: table;  
                    }
              

              jedoch nicht.

              Aber kann ja auch nicht. Die Objekte, die 'table-row' und 'table' entsprächen, lägen ja zwischen html und body und wüssten wohl nichts von einer Höhenangabe 100%.

              See ya up the road,
              Gunnar

              --
              “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)