Home/ Questions/Q 8630051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:57:55+00:00

Any idea how to make the middle sections in this code below ( jsFiddle

  • 0

Any idea how to make the middle sections in this code below (jsFiddle here) adjust to the height of the actual container without specifying fixed values or Javascript? In this fiddle I tried setting absolute and relative for the container but the page always shows vertical scrollbar as the height of the container exceeds the height of the actual page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body { margin: 0; height:100%;}
        #mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
        #headerContainer { width: 100%; position: relative; background: #323232; color: white; height: 30px; }
        #middleContainer { height: 100%; }
        #leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
        #middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
        #rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
        #footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
    </style>
</head>
<body>
    <div id="mainContainer">
        <div id="headerContainer">
            headerContainer
        </div>
        <div id="middleContainer">
            <div id="leftSection">
                <div style="margin-top: 30px;">leftSection</div>
            </div>
            <div id="middleSection">
                <div style="margin-top: 30px;">middleSection</div>
            </div>
            <div id="rightSection">
                <div style="margin-top: 30px;">rightSection</div>
            </div>
        </div>
        <div id="footerContainer">
            footerContainer
        </div>
    </div>
</body>
</html>

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This seems to do what you want:

    http://jsfiddle.net/grc4/XTQuT/2/

    Absolute positioning takes #middleContainer and #footerContainer out of the normal flow. #middleContainer is forced to take up the size of the whole page, but is given a margin to allow room for the header and footer. #footerContainer is fixed to the bottom of the page with bottom: 0. The left and right columns can then just use height: 100% to take up the right space, but the middle column still needs absolute positioning to force it to only use the remaining space.

    • 0