height: 100% nicht funktioniert

Question

Ich versuche, ein div (Menü) mit einer Breite von 20% meines Bildschirms und eine Höhe von 100% zu schaffen, sondern die div nicht angezeigt auf dem Bildschirm . Keine Ahnung warum. Hier ist mein Code:

#Menu { 
 
    display: inline-block; 
 
    background-color: black; 
 
    min-width: 20%; 
 
    min-height: 100% 
 
} 
 
    
 
#Bar { 
 
    float: right; 
 
    background-color: blue; 
 
    width: 80%; 
 
    height: 100%; 
 
    margin: 0; 
 
    float: left; 
 
}

<div id="Menu">Menu</div> 
 
<div id="Bar">Bar</div>

Answer 1

Da Ihr div Elemente leer sind, werden sie auf 0 Höhe kollabieren. Eine Höhe von 100% hilft in diesem Fall nicht.

Sie werden feststellen, dass Sie Ihre Elemente anzeigen können, wenn Sie eine min-height Eigenschaft einschließen.

Ich habe einige Änderungen vorgenommen, um es zusammen mit einigen Feinabstimmungen zu arbeiten. Ich ziehe immer meinen echten Code ein, aber ich habe die Änderungen nicht eingerückt, damit Sie sie leichter sehen können.

#Menu { 
 
\t display:inline-block; 
 
\t background-color : black; 
 
\t min-width:20%; 
 
\t min-height:100%; 
 
margin: 0; 
 
min-height:10px; 
 
float: right; 
 
} 
 

 
#Bar { 
 
\t float:right; 
 
\t background-color : blue; 
 
\t width:80%; 
 
\t height:100%; 
 
\t margin:0; 
 
\t float:left; 
 
min-height: 10px; 
 
}

<div id="Menu"> 
 
\t \t 
 
</div> 
 
<div id="Bar"> 
 
\t 
 
</div>