Noel: Div: 100% ist nicht 100% vom parent

SELF-Forum

Div: 100% ist nicht 100% vom parent

Noel
– Informationen zu den Bewertungsregeln

Hallo.

Ahm... ich bin am Ende meines Lateins. Bei einer ganz simplen Sache. Weiss echt nicht was das soll. Hab ich da tatsächlich was so winziges bzw. universales übersehen?

Zum Problem:

  
<html>  
<body>  
<div class="outer_div">  
  <div class="inner_div">  
    Text innerhalb des inner_divs.  
  </div>  
</div>  
</body>  
</html>

Soweit ganz simpel.

  
body {  
width:100%;  
height:100%; }  
  
.outer_div {  
width:100%;  
height:100%; }  
  
.inner_div {  
width:500px;  
height:100%; }

Sollte das Ergebnis nicht so aussehen:
outer_div ist 100% in Höhe und Breite vom Elternelement body, also Browserfensterfüllend. Darin ein kleineres Div welches nämlich ebenso hoch wie sein Elernelement (outer_div) ist, und zwar 100% des Browserfensters, sowie 500px breit. Nein?

Tut's nämlich nicht. innver_div ist exakt so lang wie der Text darin ist. Breite stimmt. Reproduzierbar. Aber warum?

Bitte sagt mir wo zum Geier ich den Denkfehler gemacht habe. Ich komme nicht dahinter.

Grüße,
Noel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Div: 100% ist nicht 100% vom parent

    Der Martin
    – Informationen zu den Bewertungsregeln

    Hi,

    body {

    width:100%;
    height:100%; }

    .outer_div {
    width:100%;
    height:100%; }

    .inner_div {
    width:500px;
    height:100%; }

      
da scheint was zu fehlen. ;-)  
  

> outer\_div ist 100% in Höhe und Breite vom Elternelement body, also Browserfensterfüllend.  
  
Genau hier liegt dein Problem: Das Elternelement von body hat keine feste Höhe, richtet sich also nur nach seinem Inhalt. Dementsprechend hat auch dein body-Element nur diese Höhe.  
  

> Tut's nämlich nicht. innver\_div ist exakt so lang wie der Text darin ist. Breite stimmt. Reproduzierbar. Aber warum?  
  
Works as designed.  
  
So long,  
 Martin  

-- 
Ich wollt', ich wär ein Teppich.  
Dann könnte ich morgens liegenbleiben.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Div: 100% ist nicht 100% vom parent

      Noel
      – Informationen zu den Bewertungsregeln

      Danke an beide Antwortschreiber!

      Natürlich war html in der Höhe nicht definiert was mir hätte klar sein sollen, 100% von <Undefiniert> werden halt ignoriert. Dankeschön!

      Jetzt funktioniert alles wie gewünscht.

      Beste Grüße,
      Noel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Div: 100% ist nicht 100% vom parent

    josh
    – Informationen zu den Bewertungsregeln

    Hallo,

    body {
    width:100%;
    height:100%; }

    <body> ist aber ein Kindelement von <html>, und das ist bis jetzt so hoch wie der Inhalt. Deswegen bringt height:100%; bei <body> erst einmal gar nichts.

    Du kannst aber dem <html>-Element ebenfalls die Höhe 100% (= 100% von der Viewporthöhe) geben:

      
html, body {  
  margin:0;  
  padding:0;  /* margin und padding auf 0, weil es sonst Scrollleisten gibt */  
  width:100%;  
  height:100%;  
}

    Allerdings wirst du ein Problem haben, wenn der Text länger ist als der Viewport; wenn du die CSS-Eigenschaft overflow nicht veränderst geht der Text zwar weiter, aber die Elemente hören vorher auf.

    Gruß

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln