Viennamade: body-height, Verständnisfrage

Hallo liebe Forumsteilnehmer!

Ich mag ein div-element haben, daß die gesamte Bildschirmhöhe (bzw. Viewporthöhe) beansprucht.
Kann mir jemand sagen, warum es so nicht funktioniert:

<body style="margin:0px;padding:0px;">
<div style="width:150px;height:100%;border:1px green solid;"></div>

So aber schon:
                                    !_________!
<body style="margin:0px;padding:0px;height:100%">
<div style="width:150px;height:100%;border:1px green solid;"></div>

Danke
Viennamade

  1. Hallo wiederum!

    Ich mag ein div-element haben, daß die gesamte Bildschirmhöhe (bzw. Viewporthöhe) beansprucht.

    <body style="margin:0px;padding:0px;height:100%">
    <div style="width:150px;height:100%;border:1px green solid;"></div>

    Und jetzt sehe ich noch, daß dieser Quelltext bei mir auch nur im IE6.0, nicht aber im aktuellen Mozilla, nicht im NN7.02 funktioniert! Wie macht man also ein div in voller Höhe?

    Danke
    Viennamade

    1. hi,

      Und jetzt sehe ich noch, daß dieser Quelltext bei mir auch nur im IE6.0, nicht aber im aktuellen Mozilla, nicht im NN7.02 funktioniert! Wie macht man also ein div in voller Höhe?

      height:100% für html und body vergeben.

      gruss,
      wahsaga

    2. Hi,

      Und jetzt sehe ich noch, daß dieser Quelltext bei mir auch nur im IE6.0, nicht aber im aktuellen Mozilla, nicht im NN7.02 funktioniert! Wie macht man also ein div in voller Höhe?

      vielleicht, weil diese auch noch das HTML-Element heranziehen?

      Aber bist Du sicher, daß Du überhaupt 100% Bildschirmhöhe willst? Bist Du sicher, daß der Inhalt tatsächlich dort hineinpasst (auch bei Schriftvergrößerung)? Und falls Du an overscroll denkst, dann schau' Dir aber sicherheitshalber einmal die Druckvorschau einer solchen Seite an...

      freundliche Grüße
      Ingo

      1. Hallo!

        vielleicht, weil diese auch noch das HTML-Element heranziehen?

        Danke :-)

        Aber bist Du sicher, daß Du überhaupt 100% Bildschirmhöhe willst?

        Naja, die Situation ist die: Ich baue eine Präsenz mit Frames (Menüstreifen ist auf der linken Seite) auf eine ohne um. Es handelt sich um statischen Webspace, also keine SSI, etc. Mein html-Editor - phase5 - kann aber includes simulieren, er bindet eine Textdatei (mit html drinnen) auf Befehl an vorzugebende Stellen in die Inhaltsseiten ein. Jetzt will ich halt den Menüframe mit einem div in maximaler Höhe ersetzen und den Inhalt nebenan floaten ...

        Aber bist Du sicher, daß Du überhaupt 100% Bildschirmhöhe willst? Bist Du sicher, daß der Inhalt tatsächlich dort hineinpasst (auch bei Schriftvergrößerung)?

        Der Inhalt des Menüframes ist ganz, ganz klein ... paßt faßt auf ein Handy-Display ...

        html+body+div auf 100% funktioniert wahrscheinlich nicht am Mac/IE ... bin aber noch am testen.

        Beste Grüße
        Viennamade

        1. Hi,

          Aber bist Du sicher, daß Du überhaupt 100% Bildschirmhöhe willst? Bist Du sicher, daß der Inhalt tatsächlich dort hineinpasst (auch bei Schriftvergrößerung)?
          Der Inhalt des Menüframes ist ganz, ganz klein ... paßt faßt auf ein Handy-Display ...

          html+body+div auf 100% funktioniert wahrscheinlich nicht am Mac/IE ... bin aber noch am testen.

          nur: wenn Du html,body auf height:100% setzt, dann wirkt sich das AFAIK auf die gesamte Seite aus.
          Wozu soll der Menüstreifen überhaupt 100% Höhe haben? Nur für eine andere Hintergrundfarbe? Da bekämst Du vermutlich sowieso Probleme, wenn die Seite scrollt. Sowas - wenn's denn sein muß - solltest Du eher z.B. über eine geeignete Hintergrundgrafik realisieren.

          freundliche Grüße
          Ingo

          1. Hallo Ingo!

            Wozu soll der Menüstreifen überhaupt 100% Höhe haben?

            Meine Überlegung ist, daß die Inhaltsseiten mit Sicherheit mehr Höhe als der linke Menüstreifen beanspruchen. Wenn der Menüstreifen also zum Beispiel 300px hoch ist und die gefloateten Inhaltselemente in Summe 500px, so kleben Elemente der Inhaltsseite, deren Oberkante tiefer als 300 px ist, am linken Rand des Viewports. Daher dachte/denke ich muß der Menüstreifen 100% haben muß. Aber vielleicht/hoffentlich gibt's eine bessere Lösung?

            Äh, jetzt nach dem Tippen des letzten Fragezeichens frage ich mich selber, ob ein die Inhalte einschließendes <div class="content"> die bessere Lösung ist?

            Beste Grüße
            Viennamade

            1. hi,

              Wenn der Menüstreifen also zum Beispiel 300px hoch ist und die gefloateten Inhaltselemente in Summe 500px, so kleben Elemente der Inhaltsseite, deren Oberkante tiefer als 300 px ist, am linken Rand des Viewports. Daher dachte/denke ich muß der Menüstreifen 100% haben muß. Aber vielleicht/hoffentlich gibt's eine bessere Lösung?

              warum floatest du das menü dann nicht nach links, und hältst die inhalte, die unterhalb des menüs liegen, mit einem entsprechenden margin-left vom linken rand des viewports fern? (etwas über 300px sollte margin hier vermutlich betragen.)

              gruss,
              wahsaga

              1. Hallo!

                Wenn der Menüstreifen also zum Beispiel 300px hoch ist und die gefloateten Inhaltselemente in Summe 500px, so kleben Elemente der Inhaltsseite, deren Oberkante tiefer als 300 px ist, am linken Rand des Viewports. Daher dachte/denke ich muß der Menüstreifen 100% haben muß. Aber vielleicht/hoffentlich gibt's eine bessere Lösung?

                warum floatest du das menü dann nicht nach links, und hältst die inhalte, die unterhalb des menüs liegen, mit einem entsprechenden margin-left vom linken rand des viewports fern? (etwas über 300px sollte margin hier vermutlich betragen.)

                Ich weiß ja nicht, welche Inhalte unterhalb Menüs stehen, denn die Höhe der Text enthaltenden Elemente ist verschieden (em). Und wenn der Surfer die Breite des Browsers verändert: Kommen da nicht Elemente mit und ohne margin-left durcheinander? Vielleicht verstehe ich Deinen Ansatz auch nur nicht? Mit der aktuellen Lösung "div" um den Inhalt herum bin ich ziemlich zufrieden.

                Beste Grüße & Danke
                Viennamade

                1. hi,

                  Ich weiß ja nicht, welche Inhalte unterhalb Menüs stehen, denn die Höhe der Text enthaltenden Elemente ist verschieden (em). Und wenn der Surfer die Breite des Browsers verändert: Kommen da nicht Elemente mit und ohne margin-left durcheinander? Vielleicht verstehe ich Deinen Ansatz auch nur nicht? Mit der aktuellen Lösung "div" um den Inhalt herum bin ich ziemlich zufrieden.

                  so war's ja auch gemeint: ein div um den kompletten inhalt legen, und diesen per margin-left auf abstand halten.

                  gruss,
                  wahsaga

                  1. Hallo!!!

                    Ich weiß ja nicht, welche Inhalte unterhalb Menüs stehen, denn die Höhe der Text enthaltenden Elemente ist verschieden (em). Und wenn der Surfer die Breite des Browsers verändert: Kommen da nicht Elemente mit und ohne margin-left durcheinander? Vielleicht verstehe ich Deinen Ansatz auch nur nicht? Mit der aktuellen Lösung "div" um den Inhalt herum bin ich ziemlich zufrieden.

                    so war's ja auch gemeint: ein div um den kompletten inhalt legen, und diesen per margin-left auf abstand halten.

                    Kaum sind 6 Stunden seit Deinem Posting vergangen und jetzt hab ich es auch kapiert!

                    ... und diesen per margin-left auf abstand halten ....

                    Diesen Satzteil hab ich nicht verstanden und/oder nicht für so wichtig gehalten und jetzt fiel es mir (beim Teekochen) wie Schuppen von den Augen!
                    Weiß gar nicht wie ich Dir danken soll!
                    Viennamade

                    1. hi,

                      Weiß gar nicht wie ich Dir danken soll!

                      geld, frauen, drogen - lass dir was einfallen :-)

                      gruss,
                      wahsaga

            2. Hi,

              Äh, jetzt nach dem Tippen des letzten Fragezeichens frage ich mich selber, ob ein die Inhalte einschließendes <div class="content"> die bessere Lösung ist?

              bestimmt. wobei id="content" vermutlich noch logischer wäre.

              freundliche Grüße
              Ingo

  2. Hi,

    Ich mag ein div-element haben, daß die gesamte Bildschirmhöhe (bzw. Viewporthöhe) beansprucht.
    <body style="margin:0px;padding:0px;height:100%">
    <div style="width:150px;height:100%;border:1px green solid;"></div>

    Die prozentuale Höhenangabe bezieht sich auf die Höhe des Elternelements.
    Beim div ist das Elternelement body, beim body ist es html, bei html ist es der Viewport.

    Wenn body keine Höhenangabe hat, gilt der initial-Wert, und der ist auto - das läuft mehr oder weniger auf "so hoch wie durch den Inhalt erforderlich" raus.
    100% von  "so hoch wie durch den Inhalt erforderlich" sind:  "so hoch wie durch den Inhalt erforderlich"

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.