ansaurus

Question

3-row layout, expanding middle, min-height:100% so footer is at bottom when there is minimal content

Answer 1

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

David Lawson 2010-05-15 09:25:52

Answer 2

A:

#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.

danixd 2010-05-15 10:40:23

This will only stick the footer below the middel-part. I think what he wants is a footer that always stick to the bottom of the screen unless the expanding content is bigger than the browser height. in which case he wants it to appear beneath the end of the expanding content.

Falle1234 2010-05-15 10:52:33

Answer 3

A:

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.

Falle1234 2010-05-15 10:50:17

This isn't what I'm looking for - no sticky footers I can find have an expanding center.

David Lawson 2010-05-16 03:55:56

Answer 4

A:

$(function(){
    expand();
});

$(window).resize(function(){
    expand();
});

function expand()
{
    $('#timetable').css('minHeight', ($(window).height() - $("#footer").height() - $("#timetable").offset()["top"] - 20) + "px");
    $('#todo').css('minHeight', ($(window).height() - $("#footer").height() - $("#timetable").offset()["top"] - 20) + "px");
    /* if ie, set height*/
}

David Lawson 2010-05-16 04:44:23

What are #timetable and #todo? You certainly shouldnt need to set 2 CSS values with Javascript, and I don't believe you need to reset the values everytime the window is resized either. Finally you shouldn't use magic numbers (you subtract 20 at the end of both calculations, without explanation). See my solution.

jackocnr 2010-06-08 16:27:32

Answer 5

A:

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>

jackocnr 2010-06-07 16:58:21

sure the background is then filled, but the #middle has not stretched. not what i am looking for soz

David Lawson 2010-06-08 10:48:51

The only way you can achieve what you want is with Javascript. I have edited my post with the solution. This should do exactly what you want!

jackocnr 2010-06-08 12:57:20

ansaurus

tags:

views:

answers:

3-row layout, expanding middle, min-height:100% so footer is at bottom when there is minimal content

related questions