Question

我有一个布局，其中容器有fixed height and width of 640px x 480px。在此容器中有3个div，top，mid和bot。我希望这3个div适合容器，只要它们不会溢出容器。 top和bot div没有固定的高度，而mid应该适合空间和推顶和机器人之间的空间。

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

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

FIDDLE HERE

现在我的问题是将容器推到容器外。如何让它们适合容器而不使用overflow：hidden ？提前谢谢。

NOTE : the image should fit inside the mid container.

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

demo

Answer 4

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

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

FIDDLE

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

4 个答案: