Div height 100% in div

Bekam ich die folgende code, der nicht den trick tun:

<div id="wrap">
    <div class="navigation">    
        <ul>      
            <li>
            </li>
        </ul>
     </div>


     <div id="main">
       Content
     </div>
</div>

Möchte ich den wrap auf 100% Höhe. Das funktioniert ganz gut. Aber sobald ich versuche das #main div auf 100% Höhe gut, gibt es nicht. Dieses div immer bricht auf der Höhe des Inhalts.

html{height:100%;}
body{overflow-y:scroll; margin:0px; padding:0px; height:100%;}
#wrap{
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */ 
    height:100%; /* Mindesthöhe für den IE */ 
    width:100%;
    position:absolute;
    overflow:hidden;
}


#main{
    width: 980px !important;


    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    height:auto !important;


}

Kann jemand bitte mir helfen, dieses problem lösen?
Vielen Dank im Voraus

  • Sie setzen die Höhe des #main zu 100% height:auto, das nicht existiert.
  • vollständig entfernen height:auto !important
  • Bitte geben Sie uns ein bisschen mehr Informationen über den Effekt, den Sie zu erreichen versuchen. Vielleicht können wir helfen, mit einer alternativen Lösung. Versuchen Sie zu haben #main füllen Sie den rest der Seite unterhalb der navigation?
  • ich würde es auf einen alternativen Weg, aber das problem ist, dass die navigation mit hat zu 100% sein; der Inhalt ist nur erlaubt werden 980px.
  • ja, ich möchte das #main-element zu füllen den rest der Seite. Es zentriert werden soll, die durch #main {width: 980px; margin: 0 auto; background:red;}
  • Mögliche Lösungen: hier und here

InformationsquelleAutor Jimmy Tschonga | 2013-02-05
  1. 4

    Ändern Sie den Stil für wrap. Live-Demo

    #wrap {
    min-height: 100%; /* Minimum height for modern browsers */
    height:100%; /* Minimum height for IE */ 
    width:100%;
    position:absolute;
    overflow:hidden;
    border:1px solid blue;
}
    • vielen Dank. Ohne das height:auto !wichtig; hat den trick 😉
    • Dies funktioniert nicht, wenn das #main-content länger ist als die Seite. Es wird abgeschnitten, weil die Höhe ist begrenzt auf 100%. Beispiel hier.
    InformationsquelleAutor ATOzTOA
  2. 1

    In Ihrem Fall, scheint es nicht, dass das #main div notwendigerweise Bedürfnisse zu erweitern, zu 100%. Welche Bedürfnisse zu erweitern, ist der rote hintergrund.

    Schlage ich vor, mit einem "Fake-hintergrund". Mit position:fixed können Sie fügen Sie einen roten hintergrund nicht scrollt mit der Seite. Der rest des Inhalts scrollen über Sie. So etwas wie diese.

    CSS:

    html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

div#background {
  position: fixed;
  width: 100%;
  height: 100%;
}

div#background div#color {
  position: relative;
  background-color: red;
  width: 980px;
  height: 100%;
  margin: 0px auto;
}

div#nav {
  position: relative;
  background-color: #FFF;
}

div#main {
  position: relative;
  width: 950px;
  margin: 0px auto;
}

    HTML:

    <div id="background">
  <div id="color"></div>
</div>

<div id="nav">NAVIGATION<br />even two lines<br /> or more</div>

<div id="main">
  <p>CONTENT GOES HERE</p>
</div>

    • Downvoters: Bitte erläutern Sie Ihre Stimmen. Es hilft zu verbessern die Antworten.
    InformationsquelleAutor showdev
Schreibe einen Kommentar