Gix: div über ganze Dokumentgröße strecken

SELF-Forum

div über ganze Dokumentgröße strecken

Gix
– Informationen zu den Bewertungsregeln

Hi,

ich habe zwei Div-Container, die oben und unten an den Browserrand angrenzen sollen.

html {
 height: 100%;
}

body {
 height: 100%;
 margin: 0px;
}

Meine Divs haben auch eine 100% Höhe, sodass alles wunderbar funktioniert: oben und unten liegen die Divs am Browserrand an.

Jetzt ist mein Inhalt im zweiten Div aber länger, als der Browser darstellen kann. Auch das ist für diesen (!) Div kein Problem: er grenzt unten an. Der nebenliegende Div jedoch, welcher ebenfalls auf 100% Höhe steht, wird nicht vergrößert.

Was kann ich da machen?

Gruss
Gix

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. div über ganze Dokumentgröße strecken

    Kalle_B
    – Informationen zu den Bewertungsregeln

    Jetzt ist mein Inhalt im zweiten Div aber länger, als der Browser darstellen kann. Auch das ist für diesen (!) Div kein Problem: er grenzt unten an. Der nebenliegende Div jedoch, welcher ebenfalls auf 100% Höhe steht, wird nicht vergrößert.

    Was kann ich da machen?

    1. Zu einer Tabelle greifen, kleinere Zellen wachsen mit.

    2. Den kleineren div fixieren, dann bleibt er beim Scrollen stehen.

    Kalle

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. div über ganze Dokumentgröße strecken

      Gix
      – Informationen zu den Bewertungsregeln

      Danke für dieses geistlose Kommentar.

      1. Ich möchte Divs verwenden und keine Tables.
      2. Der Div soll relativ bleiben, sprich immer zentriert und immer Ausnutzung der gesamten Browserhöhe.

      Gruss

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. div über ganze Dokumentgröße strecken

    Inita
    – Informationen zu den Bewertungsregeln

    hi,

    sowie ich verstehe, fuer dich das Problem ist height, width waer ja kein probl, imo, oder? Von diesem Beispiel kannst du vielleicht fuer dich finden. Height da is immer 100%.

    LG, Inita

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>sticky footer</title>
    <style type="text/css">
    body,html{
        font:11px Verdana, Arial, Helvetica, sans-serif;
        color:#000;
        background:#FFF;
        height:100%;
        padding:0;
        margin:0;}
    #page{
        width:800px;
        padding:0;
        margin-top:0;
        margin-right:auto;
        margin-bottom:110px;
        margin-left:auto;
        position:relative;
        top:0;
        min-height:100%; /* For Modern Browsers */
        height:auto !important; /* For Modern Browsers */
        height:100%; /* For IE */ }
    #header{
        margin:0;
        padding:0}
    #cont{
        margin:5px;
        padding-bottom:160px;
        height:auto !important;}
    #footer{
        width:100%;
        margin:0;
        padding:0;
        position:absolute;
        bottom: 0 !important;
        bottom:-1px;
        height:110px;}
    #ib{
        top:230px;
        left:360px;
        width:100%;
        padding:0;
        margin:0;
        height:100px;
        overflow:hidden; /*scroll*/
        border:1px solid red;}
    </style>
    </head>
    <body>
    <div id="page" style="border:1px solid">
      <div id="header" style="border:1px solid">
        <p>header</p><p>header</p><p>header</p>
      </div>
      <div id="cont" style="border:1px solid">
        <p>content</p>
        <div id="ib">
          <p>box box box box box box box box box box box box</p><p>box</p><p>box</p><p>box</p>
        </div>
      </div>
      <div id="footer" style="border:1px solid">
        <p>footer</p><p>footer</p><p>footer</p>
     <p>(HTML/XHTML) Höhe von Divs? von muffin, 14.03.2007, 15:22</p>
      </div>
    </div>
    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. div über ganze Dokumentgröße strecken

      Inita
      – Informationen zu den Bewertungsregeln

      rehi,

      test

        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<title>sticky footer</title>  
<style type="text/css">  
body,html{  
    font:11px Verdana, Arial, Helvetica, sans-serif;  
    color:#000;  
    background:#FFF;  
    height:100%;  
    padding:0;  
    margin:0;}  
#page{  
    width:800px;  
    padding:0;  
    margin-top:0;  
    margin-right:auto;  
    margin-bottom:110px;  
    margin-left:auto;  
    position:relative;  
    top:0;  
    min-height:100%; /* For Modern Browsers */  
    height:auto !important; /* For Modern Browsers */  
    height:100%; /* For IE */ }  
#header{  
    margin:0;  
    padding:0}  
#cont{  
    margin:5px;  
    padding-bottom:160px;  
    height:auto !important;}  
#footer{  
    width:100%;  
    margin:0;  
    padding:0;  
    position:absolute;  
    bottom: 0 !important;  
    bottom:-1px;  
    height:110px;}  
#ib{  
    top:230px;  
    left:360px;  
    width:100%;  
    padding:0;  
    margin:0;  
    height:100px;  
    overflow:hidden; /*scroll*/  
    border:1px solid red;}  
</style>  
</head>  
<body>  
<div id="page" style="border:1px solid">  
  <div id="header" style="border:1px solid">  
    <p>header</p><p>header</p><p>header</p>  
  </div>  
  <div id="cont" style="border:1px solid">  
    <p>content</p>  
    <div id="ib">  
      <p>box box box box box box box box box box box box</p><p>box</p><p>box</p><p>box</p>  
    </div>  
  </div>  
  <div id="footer" style="border:1px solid">  
    <p>footer</p><p>footer</p><p>footer</p>  
 <p>(HTML/XHTML) Höhe von Divs? von muffin, 14.03.2007, 15:22</p>  
  </div>  
</div>  
</body>  
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln