tags:

views:

21

answers:

2
<head>
<style type = "text/css">
body{
text-align:center;
}

#container{
position:relative;
width:600px;
height:auto;
border:1px solid #ccbbaa;
}

#box{
position:absolute;
width:300px;
left:2px;
border:1px solid #ccbbaa;
}


</style>
</head>
<div id = "container">

<div id = "box">
<p>
message .....
</p>
<p>
message .....
</p>
</div>
    </div>

The question is how to make the height of container and box consistent using not fixed height.

thanks.

A: 

You have to make the child box div, relatively positioned. Absolutely positioned box will not make the container auto extend height.

Strelok
but I have to make the child box div absolute positioned.thanks
guyuequan
@guy, then JavaScript is your only choice. Like @PeterWong answered.
Strelok
A: 

Could you use javascript? Here is my way by using jQuery:

$("#box").resize(function() {
  $("#container").width($(this).width()).height($(this).height());
});
PeterWong
Could provide a non-jquery edition?
guyuequan
thanks PeterWong I have solved with javascript....
guyuequan