Weagofeagelvesd
New Member
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.\[code\]<!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>\[/code\]?