将div垂直固定在具有固定高度和宽度的父div上

Question

我有一个布局，其中容器具有fixed height and width of 640px x 480px的fixed height and width of 640px x 480px 。 该容器内有3个div，分别是top ， mid和bot 。 我希望这3个div适合容器内部，前提是它们不会溢出容器。 top和bot div没有固定的高度，而mid应该适合两者之间的空间并推动top和bot。

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

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;
}

在这里

现在我的问题是将机器人从容器中推到中间。 我如何使它们适合容器内而不使用溢出：隐藏 ？ 提前致谢。

NOTE : 图像应适合mid容器。

UPDATE top和bot div可以包含段落，因此它的高度不是固定的。

Answer 1

检查此样本：

http://jsfiddle.net/J6QTg/8/

.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;
}

更新：

也可以使用表格，以使用更灵活的盒子。

http://jsfiddle.net/jslayer/U3EaZ/

HTML：

<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>

CSS：

.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;
}

Answer 2

我会使用JavaScript / JQuery： FIDDLE

为了简单起见，我使用了JQuery，但是它可能仅用JavaScript即可完成...

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

Answer 3

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

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

演示

Answer 4

尝试根据容器设置中间高度。

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

小提琴