UL bricht aus 100% Höhe Container

UL-Liste Elemente scheinen nicht zu dem übergeordneten Container 100% Breite in Chrom und Firefox zu gehorchen. Ich habe versucht, mit list-style-position:inside; aber das scheint nicht zu helfen:UL bricht aus 100% Höhe Container

<html style="height: 100%"> 
<body style="height: 100%"> 
    <div id="mainContainer" style="background: orange; height: 100%;"> 

     <div style="background: #1f1f1f; width: 200px; height: 100%;"> 

      <ul style="list-style-position: inside;"> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
       <li>hello</li> 
      </ul> 

     </div> 
    </div> 
</body>

Kann mir jemand erklären, wie ich das ul Text in dem Beispiel in der Orange div Container bekommen?

Quelle

2017-05-28 j3ko

die Höhe: 100% ist eine Voraussetzung. Wie können Sie das tun, ohne die Höhe zu entfernen: 100% aus den übergeordneten Containern? – j3ko

Entfernen style Attribut von html Tag.

<html> 
 
<body style="height: 100%"> 
 
    <div id="mainContainer" style="background: orange; height: 100%;"> 
 

 
     <div style="background: #1f1f1f; height: 100%; width: 200px;"> 
 

 
      <ul style="list-style-position: inside;"> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
       <li>hello</li> 
 
      </ul> 
 

 
     </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-05-28 05:13:14 vatz88

Ich brauche die Höhe: 100% der übergeordneten Container. Dies ist ein abgespecktes Beispiel für ein Problem, das ich habe. Ich muss den Container neben dem schwarzen, der 100% Höhe kostet, schweben lassen. – j3ko

Hinzugefügt 'style height: 100%;' für inner 'div' auch. Jetzt denke ich, es funktioniert wie du willst. – vatz88

Entschuldigung mein Fehler, die 'Höhe: 100%' sollte in der ursprünglichen Frage sein. Das Problem ist, wenn auf "Höhe: 100%" eingestellt ist, dass die übergeordneten Container die Höhe des Bildschirms einnehmen. Aber das UL-Element innen ist größer als der Bildschirm, so dass das Fenster scrollt und Sie sehen, wie die UL aus dem übergeordneten Element ausbricht. – j3ko

UL bricht aus 100% Höhe Container

Antwort

Verwandte Themen