2列、親の最初の上と2番目の列

Question

私は絶対的なコンテナを持っています（絶対的なままでなければなりません）。固定された高さで、2リットルを内側に、1つを上に、そして2を底に配置する必要があります。両方のliの高さは可変で、下のものは絶対位置を使用してはいけません。

構造は、あなたがどのようにそれを行うにはjsfiddle here

任意のアイデアをオスロ見ることができます

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

のですか？ありがとう

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を変更することができます場合は、ディスプレイを使用することができますコンテナやディスプレイ用のテーブル：テーブル - 追加のコンテナ用のセル、次に垂直方向に並べることができますn内容。最初の里を一番上に置くには、絶対的な配置を使用することができます。

#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