Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS-Problem

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS-Problem

    Hallo,

    ich habe ein Darstellungsproblem und weiß nicht mehr weiter.
    Ich habe 3 Seitenabschnitte:

    1. Header
    2. Inhalt
    3. Footer.

    HTML-Code:
    html, body {
        height:        100%;
        margin:        0;
        padding:    0;
        overflow:    hidden;
    }
    #header {
        background-color:    #FF0000;
        width:                100%;
    }
    #content {
        background-color:    #00FF00;
        width:                100%;
        height:                100%;
        margin:                0;
        bottom:                50px;
        overflow-y:            scroll;
    }
    #footer {
        background-color:    #0000FF;
        width:                100%;
        height:                50px;
        bottom:                0;
        position:            absolute;
    }
    In Prinzip soll der Headerbereich in der Höhe flexibel sein, deswegen keine feste Höhenangabe.
    Der Footerbereich hat eine bestimmte Höhe die immer gleich ist.

    Und jetzt das Problem:
    Der Inhaltsbereich soll sich immer zwischen Header und Footer zu 100% ausdehnen mit einer sichtbaren Scrollbar.

    Mein Contentbereich läuft leider über den unteren Bildschirmrand hinaus. Die Scrollbar wird zwar angezeigt, aber scrollbar ist sie nicht.

    Hat jemand eine Idee?


    Man friert nur, wenn man glaubt, einem sei kalt


  • #2
    Flexbox kann dir da weiterhelfen. Dann brauchst du auch keine positions Angaben. Scrollbars sind erst Scrollbar wenn genug Inhalt vorhanden ist. Wenn du eine Scrollbar einblendest aber kein Inhalt drinne ist dann kann man ja auch nix Scrollen. Normalerweise wollen Leute keine Scrollbar haben erst wenn es voll ist weil das ja auch nicht so schön aussieht.
    html,js,css,php Soforthilfe Forum

    Kommentar


    • #3
      Hallo,

      danke für deinen Hinweis.
      So funktioniert es wie gewünscht:

      HTML-Code:
      <!DOCTYPE html>
      <html lang="de">
          <head>
              <style>
      
                  html, body {
                      height:                100%;
                      margin:                0;
                      padding:            0;
                  }
      
                  #main {
                      display:            flex;
                      flex-direction:     column;
                      height:                100%;
                  }
      
                  #header {
                      background-color:    #FF0000;
                  }
      
                  #content {
                      background-color:    #00FF00;
                      height:                100%;
                      overflow-y:            scroll;
                  }
      
                  #footer {
                      height:                50px;
                      background-color:    #0000FF;
                  }
      
              </style>
          </head>
          <body>
              <div id='main'>
                  <div id='header'>header<br><br></div>
                  <div id='content'><br><br><br>content<br><br><br><br><br></div>
                  <div id='footer'>footer</div>
              </div>
          </body>
      </html>
      Man friert nur, wenn man glaubt, einem sei kalt

      Kommentar

      Lädt...
      X