Sigurd Fröhning: Absolut Positioniertes Element & scrollen

Hallo Leute,

ich habe ein absolut positioniertes Element mit der Größe von 500px; welches per bottom:0px; immer unten am Browserfenster klebt.

Das Problem ist nun das wenn das Browserfenster auf < als 500px resized wird, dann sieht man nur den unteren Teil der Box, und man kann auch nicht scrollen, sodass man den oberen Text sehen könnte.

Habt Ihr da eine Idee?

Danke,
Sigurd

  1. "overflow" ist Dein Stichwort.

    Beste Grüße,
    gelu

    1. Hi!

      Danke für Deine Antwort. Habe ich probiert, aber es scheint nicht zu klappen. Auf welches Element sollte ich es denn Anwenden, auf die Box oder Body?

      Danke!

      Gruß, Sigurd.

      "overflow" ist Dein Stichwort.

      Beste Grüße,
      gelu

        1. Hi,

          das klappt leider nicht. Nur wenn der Inhalt des DIV Elementes größer ist als das DIV Element. Das ist bei mir aber nie der Fall. Ich habe das Problem wenn das Browserfenster kleiner als das DIV Element ist, das dann keine Scrollbalken angezeigt werden. Normalerweise schon. Allerdings ist es bei mir so das dieses DIV Element absolut positioniert ist und mit bottom:0px; unten am Browserfenster klebt. Und das ist der Grund wieso die nicht erscheinen. Aber wieso ist es so? Das verstehe ich irgendwie nicht?

          Vielen Dank!

          Sigurd.

          Hallo Sigurd,

          guckst du http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=hier

          Beste Grüße,
          gelu

          1. Hallo Sigurd,

            wenn du den Scrollbalken _am Browserrand_ haben willst, dann verzichte auf die
            absolute Positionierung und verwende relative.

            Beste Grüße,
            gelu

            1. Hallo Gelu,

              erst einmal Danke für die Antworten. Wenn ich die relative Positionierung verwende, dann klappt es, aber irgendwie ignoriert der Browser dann die bottom:0px; Angabe, sodass das Element ganz oben anfängt und nicht wie zuvor am Boden pappt.

              Meine Angaben zu dem Element sind wie folgt:

              width:1020px;
              height:697px;
              position:relative;
              left:50%;
              margin-left:-510px;
              bottom:0px;

              Geht das denn nicht mit den Scrollbalken am Browserrand und einer Positionierung am Browserboden?

              Danke!

              Gruß, Sigurd

              Hallo Sigurd,

              wenn du den Scrollbalken _am Browserrand_ haben willst, dann verzichte auf die
              absolute Positionierung und verwende relative.

              Beste Grüße,
              gelu

              1. Hallo Sigurd,

                schön, dass du jetzt _endlich_ einen Schnipsel deines css preisgibst. Wie sieht der Rest aus? Was ist das html-Gerüst darunter?

                Beste Grüße,
                gelu

                1. Hallo Gelu,

                  das CSS:

                  =================================================

                  body {
                      background-color:#fff5e5;
                      margin:0px;

                  font-family: Georgia, sans-serif;
                      font-size:12px;

                  }

                  #mainpage {
                      width:1020px;
                      height:697px;

                  position:absolute;

                  left:50%;
                      margin-left:-510px;
                      bottom:0px;
                  }

                  =================================================

                  das HTML:

                  =================================================

                  <html>
                    <head>
                      <title>Test</title>
                      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                      <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
                      <!--[if IE]>
                          <style type="text/css">@import url(ie6styles.css);</style>
                      <![endif]-->
                    </head>
                    <body>
                        <div id="mainpage">
                          Test
                        </div>
                    </body>
                  </html>

                  =================================================

                  Danke und Gruß,
                  Sigurd

                  Hallo Sigurd,

                  schön, dass du jetzt _endlich_ einen Schnipsel deines css preisgibst. Wie sieht der Rest aus? Was ist das html-Gerüst darunter?

                  Beste Grüße,
                  gelu

                  1. Hallo Sigurd,

                    #mainpage {
                        position:relative; margin-left:auto; margin-right:auto;
                        width:1020px;
                        height:697px;
                        bottom:0px;
                    }

                    zeigt bei mir im IE8 und FF 3.5.4 das gewünschte Ergebnis.

                    Mit den Angaben "left:50%; margin-left:-510px;" (damit willst du vermutlich eine horizontale Zentrierung erreichen) handelst du dir ein unnötiges Problem ein: wenn der Viewport kleiner ist als 1020, wird der Inhalt rechts abgeschnitten; "auto" für margin-left und margin-right tut's auch.
                    Gib deinem div testweise mal einen Rahmen (border:1px solid red;), dann kannst du verfolgen, wie sich veränderte Angaben auswirken.

                    Beste Grüße,
                    gelu

                    1. Hallo Gelu,

                      Vielen Dank für die Antwort. Bei mir ist es aber so das das Mainpage DIV nun wieder oben klebt und nicht unten am Browserrand. Hast Du sonst noch was geändert, weshalb es bei Dir funktioniert?

                      Danke,
                      Sigurd

                      Hallo Sigurd,

                      #mainpage {
                          position:relative; margin-left:auto; margin-right:auto;
                          width:1020px;
                          height:697px;
                          bottom:0px;
                      }

                      zeigt bei mir im IE8 und FF 3.5.4 das gewünschte Ergebnis.

                      Mit den Angaben "left:50%; margin-left:-510px;" (damit willst du vermutlich eine horizontale Zentrierung erreichen) handelst du dir ein unnötiges Problem ein: wenn der Viewport kleiner ist als 1020, wird der Inhalt rechts abgeschnitten; "auto" für margin-left und margin-right tut's auch.
                      Gib deinem div testweise mal einen Rahmen (border:1px solid red;), dann kannst du verfolgen, wie sich veränderte Angaben auswirken.

                      Beste Grüße,
                      gelu