问题描述:

I have two div's inside a parent div. I want to place the divs so that the div 1 position is absolute at bottom:0 of parent div, and the div 2 is always on the top of the div 1.

I am using absolute position to place the divs. However the problem is that the div 1 has variable height. How can I place the div 2 on the top of the div 1 in that case?

Please see the attached image:

I am trying this, but it does not work:

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;

}

Demo:

http://jsfiddle.net/P46ht/

网友答案:

You're almost there.

Try this - basically removing the positions from the boxes, and setting the width on .wrap:

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

.box1{
    background: yellow;
}

.box2{
    background: red;
}

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

网友答案:

Try it like that (DEMO):

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

.box1{
    background: yellow;
}

.box2{
    background: red;
    height: 50px;
}
相关阅读:
Top