2 rzędy, pierwszy na górze i drugi na dole rodzica

Question

Mam absolutny pojemnik (musi pozostać bezwzględny), ze stałą wysokością i muszę umieścić 2 li wewnątrz, jeden na górze i drugi na dole. Obie li mają zmienną wysokość i nie mogę używać pozycji absolutnej dla dolnej (złamie coś w menu).

Struktura jest

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

Widać olso się jsfiddle here

jakiś pomysł jak to zrobić? Dzięki

Answer 1

Możesz to zrobić za pomocą właściwości Flex.

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

Jeśli jest to możliwe, aby zmienić kod HTML, można użyć wyświetlacza: stół do pojemnika i display: table - Komórka na dodatkowy pojemnik, następnie możesz ustawić pionowo n treści. Aby pierwszy li pozostał na szczycie, można użyć pozycjonowania absolutnego.

#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

Napisałeś że bottom nie można mieć absolutną pozycję, ale nie powiedzieć tego samego o top.

W takim przypadku można użyć następujących stylów:

#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