Fit divs vertically on a parent div with fixed height and width

Question

I have a layout wherein the container has a fixed height and width of 640px x 480px. Inside this container are 3 divs, top, mid and bot. I want this 3 divs to fit inside the container provided that they will not overflow the container. The top and bot div doesn't have fixed height while the mid should fit the space between and push top and bot.

What I've already tried was like this:

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

Now my problem is the mid push the bot outside the container. How can i make them fit inside the container without using overflow: hidden? Thanks in advance.

NOTE : the image should fit inside the mid container.

UPDATE top and bot div can contain paragraphs so it's not fixed height.

You can use the `calc()` like this http://jsfiddle.net/J6QTg/2/ although it's not supported by some really old browsers. — King King, Apr 02 '14 at 07:18

jslayer · Accepted Answer · 2014-04-02T09:59:49.673

Check this sample:

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

Update:

It is also possible to use tables, to have more flexible boxes.

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

what if my `top` div is not fixed in height. for example i have 10 sentences? padding top will not work. — Vainglory07, Apr 02 '14 at 08:01

score 0 · Answer 2 · answered Apr 02 '14 at 07:27

I would use JavaScript/JQuery: FIDDLE

I've used JQuery for simplicity, but it can probably be done with just JavaScript...

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

Senju · Answer 3 · 2014-04-02T07:37:13.993

0

If the container has a fixed height and width, then you can set the height to 79.25% like this:

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

demo

edited Apr 02 '14 at 07:37

answered Apr 02 '14 at 07:29

Senju

1,035
10
25

score 0 · Answer 4 · answered Apr 02 '14 at 07:35

0

Try to set the height of mid based on the container.

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

FIDDLE

answered Apr 02 '14 at 07:35

Saritha.S.R

800
1
6
19

sorry but i cannot only rely on fixed height value – Vainglory07 Apr 02 '14 at 08:06

Fit divs vertically on a parent div with fixed height and width

4 Answers4