Home/ Questions/Q 834231
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T04:38:33+00:00

How would I change this to make the middle div expand vertically to fill

  • 0

How would I change this to make the middle div expand vertically to fill the white space?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:100%;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

#header {
    height: 150px;
    border-bottom: 2px solid #ff8800;
    position: relative;
    background-color: #c97c3e;
}

#middle {
    padding-right: 90px;
    padding-left: 90px;
    padding-top: 35px;
    padding-bottom: 43px;
    background-color: #0F9;
}
#footer {
    border-top: 2px solid #ff8800;
    background-color: #ffd376;
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
}
</style>
</head>

<body>

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="middle">
        Middle
    </div>
    <div id="footer">
        Footer
    </div>
</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t get the actual div to expand to fill a gap without Javascript, but you can easily make it appear to do so. Move your rule background-color:#0F9; from #middle to #container. This will give you the behaviour you require (it will fill the gap when there is minimal content, and when there is lots of content it will expand down, pushing the footer with it).

    If however you want the Javascript solution, the following code will work. Simply put this in your HTML head section:

    <script type="text/javascript">
window.onload = function() {
    var mid = document.getElementById('middle');
    var foot = document.getElementById('footer');
    mid.style.height = ((foot.offsetTop+foot.clientHeight)-(mid.offsetTop+mid.clientHeight))+'px';
};
</script>
    • 0