html - 可変高さに対する CSS 絶対位置

Question

親 div 内に 2 つの div があります。bottom:0div 1 の位置が親 div の絶対位置になり、div 2 が常に div 1 の上になるように divを配置したいと思います。

絶対位置を使用してdivを配置しています。ただし、問題は div 1 の高さが可変であることです。その場合、div 2 を div 1 の上に配置するにはどうすればよいですか? 添付の画像をご覧ください：

私はこれを試していますが、うまくいきません：

HTML:

<div class="box">
   <div class="wrap">
       <div class="box2">box 2</div>
       <div class="box1">box1</div>
    </div>
</div>

CSS:

.box{
    width: 200px;
    height: 200px;
    background: green;
    position: relative;
}

.wrap{
    position: absolute;
    bottom: 0;
    border: 1px solid blue;
}

.box1{
    background: yellow;
    height: 50px;
    position: relative;
}

.box2{
    background: red;
    position: absolute;
    top: 0;    
}

デモ: http://jsfiddle.net/P46ht/

Answer 1

あなたはほとんどそこにいます。

これを試してください-基本的にボックスから位置を削除し、幅をオンに設定します.wrap:

.wrap{
    position: absolute;
    bottom: 0; left:0;right:0;
    border: 1px solid blue;
}

.box1{
    background: yellow;
}

.box2{
    background: red;
}

例: http://jsfiddle.net/P46ht/1/

Answer 2

そのように試してください（DEMO）：

.wrap{
    position: absolute;
    bottom: 0;
    width: 100%;
    border: 1px solid blue;
    box-sizing: border-box;
}

.box1{
    background: yellow;
}

.box2{
    background: red;
    height: 50px;
}