Heinz Engels: Boxhöhe dem Elternelement anpassen

Hallo zusammen!

Ich lerne gerade erst CSS und schon stehe ich vor einem "Problem":

ich habe den Body meiner Seite definiert (0px Ränder, Farbe, Text usw.) und möchte darin nun eine Content-Box anlegen, die eine fixe Breite und eine Höhe hat, die der des Body entspricht. Die Box "content" soll also genauso hoch wie das Browserfenster sein. Mit welcher CSS-Angabe kann ich es erreichen, dass die Höhe sich immer an das Elternelement anpasst?

Vielen Dank,

Heinz

  1. ja nach browser sind hight:100%; möglich
    MFG
    bleicher

    --
    __________________________-
    Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
    1. Hallo,

      ja nach browser sind hight:100%; möglich

      nö, height:100%

      Hier gilt es wie immer, zu beachten, dass man die Höhenangabe, bis auf's <html> fortführen, und dabei die Ränder entfernen muss.

      mfg. Daniel

      1. Vielen Dank euch beiden!

        Allerdings habe ich nun das seltsame Problem, dass der Firefox die Content-Box mit kleinem, oberen Abstand vom Browserfenster anzeigt. Woran könnte das liegen, im IE sieht alles okay aus?

        Hier mein Code:

        [code=css]
        html
        {
         height: 100%;
         margin: 0px;
        }

        body
        {
         font-family: Verdana, Arial, Helvetica, sans-serif;
         text-align: center;
         color: #000000;
         background-color: #CCCCCC;
         margin: 0px;
         padding: 0px;
         height: 100%;
        }

        #content
        {
         background-color: #99FF66;
         color: inherit;
         width: 600px;
         height: 100%;
         text-align: left;
         margin: 0px auto 0px auto;
         padding: 0px;
         border-left: 2px dotted red;
         border-right: 2px dotted red;
        }
        [/code]

        Hat jemand 'ne Idee, wo hier das Problem liegen könnte?

        1. Hello out there!

          Allerdings habe ich nun das seltsame Problem, dass der Firefox die Content-Box mit kleinem, oberen Abstand vom Browserfenster anzeigt. Woran könnte das liegen […]?

          Am oberen Randabstand der ersten Box, die sich in der "content"-Box befindet.

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          1. Hello out there!

            Allerdings habe ich nun das seltsame Problem, dass der Firefox die Content-Box mit kleinem, oberen Abstand vom Browserfenster anzeigt. Woran könnte das liegen […]?

            Am oberen Randabstand der ersten Box, die sich in der "content"-Box befindet.

            See ya up the road,
            Gunnar

            Vielen Dank, das war es! Die erste Box war ein h1-Element. Nachdem ich dessen margin auf 0px gesetzt habe, war alles wieder wie gedacht.

            Schönen Dank an die geballte Kompetenz des Forums und Grüße,

            Heinz

            1. Hello out there!

              […] war alles wieder wie gedacht.

              Der Gedanke, die Breite der "content"-Box in Pixel festzuzementieren, ist vielleicht nicht der beste – jedenfalls nicht für Nutzer, deren Viewport schmaler ist als 600 Pixel.

              See ya up the road,
              Gunnar

              --
              “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
              1. Hello out there!

                […] war alles wieder wie gedacht.

                Der Gedanke, die Breite der "content"-Box in Pixel festzuzementieren, ist vielleicht nicht der beste – jedenfalls nicht für Nutzer, deren Viewport schmaler ist als 600 Pixel.

                See ya up the road,
                Gunnar

                Hallo Gunnar,

                da hast Du wohl recht. Allerdings fällt mir keine Methode ein, eine einigermaßen auch grafisch ansprechende Seite so zu gestalten, dass sie  von 1 bis unendlich Pixel gleich gut aussieht. So fixiere ich das Screendesign auf eine feste Breite, und lege für die Nutzer von tragbaren Geräten alternative CSS-styles an, die mehr textlastig sind. Laut Statistik benutzen 100% meiner Gäste Auflösungen von 1024x768 Pixeln oder höher. Ein fixes Design auf 800x600 Pixel sollte also keine Probleme darstellen.

                Oder was meinst Du?

                Grüße,

                Heinz

                1. Hello out there!

                  So fixiere ich das Screendesign auf eine feste Breite,

                  Du kennst die CSS-Eigenschaft 'max-width'? (Dass IEs die nicht kennen, sollte der sinnvollen Verwendung nicht im Wege stehen.)

                  und lege für die Nutzer von tragbaren Geräten alternative CSS-styles an, die mehr textlastig sind.

                  Ein durchaus gangbarer Weg.

                  See ya up the road,
                  Gunnar

                  --
                  “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    2. Hello out there!

      ja nach browser sind hight:100%; möglich

      Welcher Browser sollte so fehlertolerant sein, einen Hicks als 'height' zu lesen? ;-)

      Und die Angabe allein ist wenig hilfreich, wenn du nicht dazusagst, für welche Elemente sie gelten soll.

      @Heinz:

      eine Content-Box […], die […] eine Höhe hat, die der des Body entspricht. Die Box "content" soll also genauso hoch wie das Browserfenster sein.

      Was denn nun, soll die Box die höhe des Bodys oder des Viewports haben? Letztere wäre die Höhe des Wurzelelements 'html'.

      Wenn 'body' die 100%ige Höhe des Viewports einnehmen soll, musst du das auch angeben.

      See ya up the road,
      Gunnar

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