ansaurus

Question

Set the height property of a DIV on a page that has a "footer"

Answer 1

A:

Using a little JavaScript, I think we can solve your problem.

<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 

BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#header
{
    top: 0px;
    height: 20px;
    width: 100%;
    position: absolute;
    background-color: green;
}
DIV#content
{
    top: 20px;
    bottom:30px;
    width: 100%;
    background-color:blue;
    position: absolute;
    overflow:auto;
}
DIV#footer
{
    bottom: 0px;
    height: 30px;
    width: 100%;
    background-color: red;
    position:absolute;
}
</style>
<script type="text/JavaScript">
function adjustContent()
{
    document.getElementById("content").style.height = window.height-50;
}
</script>
</head>
<body onLoad="adjustContent()" >
    <div id="header">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids</div>
    </div>
    <div id="footer">bottom bar</div>
</body>
</html>

With the body onLoad event, the JavaScript resizes the content area to the correct height. The scrollbar does not overtake your footer, and your header and footer stay at the top and bottom of the page.

Also, adding content dynamically inside the content div should not break this layout.

Aaron 2010-01-26 20:08:18

Javascript is the only other solution I had in mind too, and it seems like I might need to go this route.

numone 2010-01-26 20:24:10

Answer 2

+2 A:

Absolute positioning.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<title>Testing Page</title>
<style  TYPE="text/css"> 
HTML
{
    height:100%;
    overflow:hidden;
}
BODY
{
    height:100%;
    margin:0;
    overflow:hidden;
}
DIV#content
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 30px;
    background-color:blue;
    overflow:auto;
}
</style>
</head>
<body>
    <div style="height:20px;background-color:green;width:100%;">top bar</div>
    <div id="content">
        main area
        <div style="height:2000px;width:500px;background-color:yellow;">cool kids</div>
    </div>
    <div style="position:absolute;bottom:0;left:0;background-color:brown;height:30px;width:100%;">bottom bar</div>
</body>
</html>

CalebD 2010-01-26 20:13:03

looking briefly at this it looks doable, thanks a ton!

numone 2010-01-26 20:39:17

In DIV#content, use 'top: 20px' and it seems to work for me, too.

Aaron 2010-01-26 20:53:27

ansaurus

tags:

views:

answers:

Set the height property of a DIV on a page that has a "footer"

related questions