我有一个布局,其中容器有一个fixed height and width of 640px x 480px
。在这个容器里面有3个div,top
,mid
和bot
。我希望这3个div适合容器内部,只要它们不会溢出容器。 top
和bot
格没有固定的高度,而mid
应该适合推顶和机器人之间的空间。在具有固定高度和宽度的父级div上垂直安装div
我已经尝试过是这样的:
HTML
<div class="main">
<div class="top">
</div>
<div class="mid">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Chestnut-breasted_Malkoha2.jpg/593px-Chestnut-breasted_Malkoha2.jpg" />
</div>
<div class="bot">
</div>
</div>
CSS
.main {
padding: 10px;
width: 640px;
height: 480px;
display: inline-block;
background: #000;
position: relative;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
}
现在我proble m是在容器外部中间推动机器人。我怎样才能让他们适合容器没有使用溢出:隐藏?提前致谢。
NOTE :
the image should fit inside the mid
container.
UPDATEtop
和bot
DIV可以包含段落,所以它没有固定的高度。
您可以使用'计算()'这样http://jsfiddle.net/J6QTg/2/虽然它不被一些真正的旧浏览器支持。 –