2 Reihen, zuerst oben und unten am Elternteil

Question

Ich habe einen absoluten Container (muss absolut bleiben), mit fester Höhe und ich muss 2 li innen, eins oben und zweite unten platzieren. Beide li's haben variable Höhe und ich darf nicht absolute Position für die untere verwenden (wird etwas im Menü brechen).

Die Struktur ist

<div id="container"> 
<div id="top"> 
    top variable height 
</div> 
<div id="bottom">bottom variable height</div> 

Sie sehen eine jsfiddle here

Jede Idee olso kann, wie es zu tun? Danke

Answer 1

Sie können dies mit der Flex-Eigenschaft tun.

Fiddle: https://jsfiddle.net/9vq8nkpc/

HTML

<div id="container"> 
    <div id="top"> 
     top variable height 
    </div> 
    <div id="bottom">bottom variable heighbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightbottom variable heightt</div> 
</div> 

CSS

#container { 
    border: 1px solid red; 
    height: 200px; 
    position: absolute; 
    display:flex; 
    flex-direction:column; 
    justify-content:space-between; 
} 
#top, #bottom { 
    border: 2px solid red; 
    background: #ccc; 
    width:80%; 
    display: inline-block; 
} 

Answer 2

Wenn es möglich ist HTML zu ändern, Sie Anzeige verwenden können: Tabelle für Behälter und display: table -Zelle für zusätzlichen Container, dann können Sie vertikal ausrichten n den Inhalt. Damit der erste Li oben bleibt, kann absolute Positionierung verwendet werden.

#container { 
 
    border: 1px solid red; 
 
    height: 200px; 
 
    width: 90%; 
 
    position: absolute; 
 
    display: table; 
 
} 
 
#top, #bottom { 
 
    border: 2px solid red; 
 
    background: #ccc; 
 
    width:80%; 
 
    display: inline-block; 
 
} 
 

 
#top{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.table-cell{ 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
}

<div id="container"> 
 
    <div class="table-cell"> 
 
      <div id="top">top variable height</div> 
 
      <div id="bottom">bottom variable height</div> 
 
    </div> 
 
</div>

Fiddle Demo: http://jsfiddle.net/3bsa7hco/1/

Answer 3

Sie schrieb, dass bottom nicht absolute Positionierung haben kann, aber nicht das gleiche über top gesagt.

#top { 
    position: absolute;   //so top won't affect bottom's placement 
} 

#bottom { 
    position: relative;   //relative to container 
    top: 100%;      //height of container ... 
    transform: translateY(-100%); //... minus height of bottom element 
} 

Fiddle