Apologies, my search has yielded many results, but none that directly address my specific issue. It appears that there is a proliferation of div-height problems on this platform. :-(
Here is the layout I am working with for testing purposes:
<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
body {
margin:0;
}
div {
width:100%;
}
.content {
position:relative;
float:none;
margin-left:auto;
margin-right:auto;
display:block;
width:680px;
}
#one {
height:100px;
position:relative;
background-color:#0000FF;
}
#two {
position:relative;
background-color:#00FF00;
height:100%;
min-height:400px;
}
#three {
height:70px;
background-color:#FF0000;
bottom:0;
position:absolute;
}
#oneone {
height:100%;
background-color:#838383;
}
#twotwo {
height:400px;
background-color:#EEFF47;
}
#threethree {
height:100%;
background-color:#400080;
}
</style>
</head>
<body>
<div id="one">
<div class="content" id="oneone"></div>
</div>
<div id="two">
<div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
<div class="content" id="threethree"></div>
</div>
</body>
</html>
My goal is to keep divs one and three fixed at the top and bottom respectively, while allowing div twotwo to dynamically adjust its height based on the content added, expanding when necessary to prevent overlap with div three and enabling scrolling.
Can this be achieved without utilizing JavaScript? If so, what CSS approach should be implemented? Thank you!