Home/ Questions/Q 9215131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:08:07+00:00

I have several divs and i need them to fill content height so that

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0