在具有固定高度和寬度的父級div上垂直安裝div

我有一個佈局，其中容器有一個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; 
}

FIDDLE HERE

現在我proble m是在容器外部中間推動機器人。我怎樣才能讓他們適合容器沒有使用溢出：隱藏？提前致謝。

NOTE :the image should fit inside the mid container.

UPDATEtop和bot DIV可以包含段落，所以它沒有固定的高度。

來源

2014-04-02 Vainglory07

您可以使用'計算（）'這樣http://jsfiddle.net/J6QTg/2/雖然它不被一些真正的舊瀏覽器支持。 –

入住此示例：

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

更新：

也可以使用表，能有更靈活的盒子ES。

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

來源

2014-04-02 07:35:57 jslayer

如果我的頂部div沒有固定在高度，該怎麼辦。例如，我有10句話？填充頂部不起作用。 – Vainglory07

@ Vainglory07，檢查更新的答案 – jslayer

它工作！：d – Vainglory07

我會使用JavaScript/JQuery的：FIDDLE

我用的JQuery爲了簡單，但大概可以只用JavaScript的做...

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

來源

2014-04-02 07:27:37

如果容器有一個固定的高度和寬度，然後就可以設置高度爲79.25％，這樣的：

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

demo

來源

2014-04-02 07:29:34 Senju

嘗試根據容器設置中間高度。

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

FIDDLE

來源

2014-04-02 07:35:20

對不起，但我不能只依靠固定身高值 – Vainglory07

在具有固定高度和寬度的父級div上垂直安裝div

回答

相關問題