vlad: webseite auf ganze anzeigehöhe erweitern

Hi, wie bekomme ich es hin, dass die webseite vertikal mindestens so groß ist, wie der angezeigte Ausschnitt.

ich hab eine Webseite von der einige Dokumente kürzer sind als eine Anzeigeseite.
Ich hätte aber dennoch gerne den footer ganz unten, anstatt in der mitte.
das heißt, der body soll soweit vergrößert werden, dass er mindestens eine Anzeigeseite füllt.

struktur ist prinzipiell so:

body
div class=site_header

div class=site_body

div class=site_footer
/body

ich möchte halt bei seiten, die kleiner als der browser ist, trotzdem den footer ganz unten haben.
dazwischen soll mit site_body aufgefüllt werden

  1. Hi vlad,
    keinen Bock auf die SELFHTML Suche, wa? Ein möglicher Weg:

    1. html, body auf 100% Höhe setzen.

    2.

    div class=site_header

    und

    div class=site_body

    in einen Container legen und diesem 100% Mindesthöhe (100% per Hack oder Condition für IE6) geben. U.U. sind die beiden inneren DIVs dann auch gar nicht mehr nötig (kommt drauf an, was du noch so veranstaltest).

    3.

    div class=site_footer

    relativ positionieren, ihm eine feste Höhe geben und einen negativen Rand nach oben, der gleich seiner eigenen Höhe ist.

    cheers
    Antipitch

    1. Ich habs vorher mit verschiedensten Kombinationen aus height und min-heigt probiert.

      Dein Vorschlag funktioniert aber auch nicht richtig.
      bei kürzeren seiten gibts das Problem, dass das site_body nicht bis runter geht (trotz min-height:100%)
      das neue, in dem site_header und site_body drin stecken, ist aber wirklich 100%
      und bei längeren seiten, geht das site_body in den site_footer rein.

      Hi vlad,
      keinen Bock auf die SELFHTML Suche, wa? Ein möglicher Weg:

      1. html, body auf 100% Höhe setzen.

      div class=site_header
      und
      div class=site_body
      in einen Container legen und diesem 100% Mindesthöhe (100% per Hack oder Condition für IE6) geben. U.U. sind die beiden inneren DIVs dann auch gar nicht mehr nötig (kommt drauf an, was du noch so veranstaltest).

      div class=site_footer
      relativ positionieren, ihm eine feste Höhe geben und einen negativen Rand nach oben, der gleich seiner eigenen Höhe ist.

      cheers
      Antipitch

      1. Hi,

        Dein Vorschlag funktioniert aber auch nicht richtig.

        willst du mit mir wetten?

        bei kürzeren seiten gibts das Problem, dass das site_body nicht bis runter geht (trotz min-height:100%)

        dann hast du irgendwas falsch gemacht.

        und bei längeren seiten, geht das site_body in den site_footer rein.

        wenn du Textinhalte höher als 100% minus Höhe des footers hast: klar. Gib deinem site_body einfach'n padding nach unten. Du willst ja vermulich eh nicht bis direkt auf deinen footer schreiben...

        Was siehst du(?):

        CSS:~~~css

        html, body {
        height:100%;
        margin:0;
        padding:0;
        border:0 none;
        }
        #wrapper {
        min-height:100%;
        background-color:yellow;
        }
        #footer {
        position:relative;
        height:20px;
        margin-top:-20px;
        background-color:black;
        }

          
        HTML:~~~html
          
        <!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" lang="de">  
        <head>  
        <title>Test</title>  
        </head>  
        <body>  
        <div id="wrapper">&nbsp;</div>  
        <div id="footer">&nbsp;</div>  
        </body>  
        </html>  
        
        

        cheers
        Antipitch

        1. Hi,

          Dein Vorschlag funktioniert aber auch nicht richtig.
          willst du mit mir wetten?

          Ich sag dir nur was ich sehe.

          bei kürzeren seiten gibts das Problem, dass das site_body nicht bis runter geht (trotz min-height:100%)
          dann hast du irgendwas falsch gemacht.

          habs genauso wie du, nur hat das, was bei dir wrapper heißt, noch den site_header und den site_body. Und der site_body geht trotz min-height:100% nicht bis zum ende des wrappers

          Was ich jetzt gemacht hab, ist, die Hintergrundeigenschaften des bodys dem wrapper zu geben. In meinem Fall geht das.
          Damit fällt das nicht auf.

          Nochmal Danke für deine Hilfe.

          und bei längeren seiten, geht das site_body in den site_footer rein.
          wenn du Textinhalte höher als 100% minus Höhe des footers hast: klar. Gib deinem site_body einfach'n padding nach unten. Du willst ja vermulich eh nicht bis direkt auf deinen footer schreiben...

          Was siehst du(?):

          CSS:~~~css

          html, body {
          height:100%;
          margin:0;
          padding:0;
          border:0 none;
          }
          #wrapper {
          min-height:100%;
          background-color:yellow;
          }
          #footer {
          position:relative;
          height:20px;
          margin-top:-20px;
          background-color:black;
          }

          
          >   
          > HTML:~~~html
            
          
          > <!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" lang="de">  
          > <head>  
          > <title>Test</title>  
          > </head>  
          > <body>  
          > <div id="wrapper">&nbsp;</div>  
          > <div id="footer">&nbsp;</div>  
          > </body>  
          > </html>  
          > 
          
          

          cheers
          Antipitch

          1. Hi vlad,

            habs genauso wie du, nur hat das, was bei dir wrapper heißt, noch den site_header und den site_body. Und der site_body geht trotz min-height:100% nicht bis zum ende des wrappers

            Nee, das geht auch nicht, weil weder prozentuale Höhe in prozentualer Höhe funktioniert, noch min-height in min-height. Von irgendwelchen Farbabgrenzungen/ 100% Höhe des div#site_body (als Abgrenzung zum Hintergrund der Seite, nehme ich an) war ja auch anfänglich nicht die Rede. Aber du hast ja mitgedacht und

            Was ich jetzt gemacht hab, ist, die Hintergrundeigenschaften des bodys dem wrapper zu geben. In meinem Fall geht das.

            und die Sache selbst gelöst. Sehr erfreut!

            cheers
            Antipitch

            PS: Bitte nur relevante Dinge zitieren, nicht einfach immer alles...