CODEWITHSUNDEEP
jquerycsshtmlheight
woopata
woopata

Reputation: 875

Several divs to divide outer div height and fill it

I have several divs and i need them to fill content height so that every div has the same height. Their height must respond to browser window resizing, so it can't be fixed. Number of divs can vary between 7 and 12. I don't know if this can be done with pure css or jquery must be involved.

Before:
original divs http://imageshack.us/a/img14/9964/23446096.jpg

After:
resized divs http://imageshack.us/a/img42/9183/76164750.jpg

Upvotes: 4

Views: 1078

Answers (2)

Joshua Whitley
Joshua Whitley

Reputation: 1186

This wasn't nearly as bad as I thought. See code below:

HTML

<html>
<head>
    <title>Test divs</title>
</head>
<body>
    <div id="header">Head</div>
    <div id="content">
        <div id="div1">Div 1</div>
        <div id="div2">Div 2</div>
        <div id="div3">Div 3</div>
        <div id="div4">Div 4</div>
        <div id="div5">Div 5</div>
    </div>
    <div id="footer">Footer</div>
</body>

CSS

body, html {
    height: 100%;
}

body, body * {
    margin: 0;
    padding: 0;
}

#header, #content, #footer, #div1, #div2, #div3, #div4, #div5 {
    border: 1px solid black;
}

#content {
    position: relative;
    height: 80%;
}

#div1, #div2, #div3, #div4, #div5 {
    position: absolute;
    right: 0;
    height: 20%;
    width: 150px;
}

#div1 {
    top: 0;
}

#div2 {
    top: 20%;
}

#div3 {
    top: 40%;
}

#div4 {
    top: 60%;
}

#div5 {
    top: 80%;
}

(Borders for visual reference only) Adjust the height and top positions of the divs according to how many divs there are (100% / number of divs, starting from 0). According to a comment on this question, it doesn't work in IE8, but I have no way of testing that at the moment. Confirmed working in IE9, IE9 with Compatibility Mode, Chrome 24, and FF 18.

Upvotes: 1

dezman
dezman

Reputation: 19358

You must use jQuery with something like this:

var $yourDivs = $('div');
function update(){
    var $winHeight = $(window).height();
    var $divNumber = $yourDivs.length;
    var $newDivHeight = ($winHeight / $divNumber);
    $yourDivs.css('height', $newDivHeight + 'px');
};

But instead of getting the window height, get the height of your content area.

Upvotes: 1

Related Questions