3-row layout, expanding middle, min-height:100% so footer is at bottom when there is minimal content_问答_开发者

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>

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>

This is my backup answer:

<!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 {
    height: 100%;
}

#container #header {
    height: 50px;
    background-color:#0F6;
}

#container #middle {
    background-color: #66F;
}

#container #footer {
    height: 20px;
    background-color: #FF3;
}

</style>
</head>

<body>

<!-- Apology note to perfectionists: I'm sorry for using tables, but see this:
    http://stackoverflow.com/questions/1703455/three-row-table-less-css-layout-with-middle-row-that-fills-remaining-space
    A layout done with this table would be impossible with CSS. -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="container">
  <tr id="header">
    <td>h</td>
  </tr>
  <tr id="middle">
    <td>m</td>
  </tr>
  <tr id="footer">
    <td>f</td>
  </tr>
</table>


</body>
</html>

#footer {
    clear: both;
}

That should to the trick. The footer should alway appear below the column with the most content.

Personally I always add a CSS clear class in my templates and use them as breaks

.clear {clear:both;}

Then:

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

    <br class="clear" />

    <div id="footer">
        Footer
    </div>
</div>

Tables will cause you more problems than they solve.

I think what you are looking for is sometimes called a sticky footer.

This page explains how it is done. What you would do is put your header and expanding content inside the wrapper he mentions.

I hope this helps you get your layout.