2行，第一個在父母的頂部和第二個在底部

Question

我有一個絕對的容器（必須保持絕對），固定的高度，我需要放置2裏，一個在上面，第二個在底部。兩個li的高度都是可變的，我不能在絕對位置使用絕對位置（會破壞菜單中的某些東西）。

結構是

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

你可以看到一個奧斯陸的jsfiddle here

任何想法，該怎麼辦呢？謝謝

Answer 1

您可以使用Flex屬性執行此操作。

小提琴：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

如果它是可以改變的HTML，您可以使用顯示：表容器和顯示：表-cell用於額外的容器，那麼你可以垂直對齊內容。爲了讓第一次留在頂部，可以使用絕對定位。

#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>

小提琴演示：http://jsfiddle.net/3bsa7hco/1/

Answer 3

你寫bottom不能有絕對定位，但你沒有說同樣的關於top。

在這種情況下，你可以使用這些樣式：

#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