Css 在具有固定高度和宽度的父div上垂直安装div

我有一个布局，其中容器的高度和宽度固定为640px 480px。在这个容器中有三个分区，

top

、

mid

和

bot

。我想这3个div适合在容器内，前提是它们不会溢出容器。

top

和

bot

div没有固定高度，而

mid

应该适合推顶和bot之间的空间

我已经尝试过的是这样的：

.mid {
    max-width: 100%;
    height: 79.25%;
    display: block;
    background: #333;
}

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>

现在我的问题是中间推机器人到容器外。如何在不使用overflow:hidden的情况下使它们适合容器？提前谢谢

注意：

---

UPDATE

top

和

bot

div可以包含段落，因此它不是固定高度。

我会使用JavaScript/JQuery：

为了简单起见，我使用了JQuery，但它可能只需要JavaScript就可以完成

var totalheight = eval($('.main').height() - $('.top').outerHeight(true) - $('.bot').outerHeight(true))
$('.mid').outerHeight(totalheight);

---

如果容器具有固定的高度和宽度，则可以将高度设置为79.25%，如下所示：

.mid {
    max-width: 100%;
    height: 79.25%;
    display: block;
    background: #333;
}

---

尝试根据容器设置mid的高度

.mid {
    width: 100%;
    height: 383px;
    display: block;
    background: #333;
}

检查此样本：

更新：

也可以使用桌子，使箱子更灵活

HTML:

---

您可以像这样使用

calc（）

，尽管一些非常旧的浏览器不支持它。如果my

top

div的高度不固定会怎么样。例如，我有10个句子？填充顶部将不起作用。抱歉，但我不能仅依靠固定高度值

.main {
    padding: 50px 0px;
    width: 640px;
    height: 480px;
    display: block;
    background: #000;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.top {
    width: 100%;
    height: 50px;
    display: block;
    background: #eee;
    position: absolute;
    top : 0;
    left : 0;
}
.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;
    position: absolute;
    bottom : 0;
    left : 0;
}

<div class="box">
    <div class="h"> Hello<br/>Cruel<br/>World </div>
    <div class="m">
        <img src="http://goo.gl/a1smCR" alt="" />
    </div>
    <div class="b"> Omg </div>
</div>

.box {
    display: table;
    width: 640px;
    height: 480px;
    background: red;
}

.h, .m, .b {
    display: table-row;
}

.h {
    background: yellow;
    height: 0;
}

.m {
    background: green;
}

.m img {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0 auto;
    display: block;
}

.b {
    background: blue;
    height: 0;
}