CODEWITHSUNDEEP
csshtml
Vainglory07
Vainglory07

Reputation: 5293

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

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.

Upvotes: 1

Views: 1842

Answers (4)

jslayer
jslayer

Reputation: 484

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

Upvotes: 1

Senju
Senju

Reputation: 1035

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

Upvotes: 0

Saritha.S.R
Saritha.S.R

Reputation: 800

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

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

FIDDLE

Upvotes: 0

Jamie Barker
Jamie Barker

Reputation: 8256

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

Upvotes: 0

Related Questions