ansaurus

Question

Answer 1

+1 A:

I would do something like this:

$(function() {
    var windowHeight = $(window).height();
    if ($('body').height() < windowHeight) {
        $('#footer').height(windowHeight - $('#content').height());
    }
});

You probably need to adjust this according to paddings/margins, but this is how it should work, basically.

elusive 2010-09-07 16:15:25

Where would this go? In any javascript file?

myermian 2010-09-07 16:17:49

as its javascript code, that would be a good idea yes :)

RobertPitt 2010-09-07 16:38:42

Answer 2

+2 A:

Hi There,

You can always try using jQuery to detect the height of the browser window, then deduct the content height from it to assign a height in pixels to the footer.

Though it would be different on different sized monitors.

To get the browser height, and store it as a variable you can use:

var browserHeight = $(window).height();

Content height can be stored using:

var contentHeight = $("#content").height();

Footer height can then be worked out like so:

var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);

So altogether, you'd have:

<script type="text/javascript">
        $(document).ready(function(){
             //Get Browser and Content Heights
             var browserHeight = $(window).height();
             var contentHeight = $("#content").height();
             //Set footer height
             var footerHeight = browserHeight - contentHeight;            
             $("#footer").height(footerHeight);
        });
</script>

Or something like that :)

Anthony

Ant Ali 2010-09-07 16:25:41

I got it to work using a mix of both answers, elusive had the right idea except it wasn't working without the $(document).ready part... Also, you were missing a parenthesis at the end `};` should really be `});`

myermian 2010-09-07 16:39:48

For some reason it's not working... $(document).ready isn't firing off at the proper timing... i can pull up a JS console and execute the JS command and it works, but if I put it in the page it doesn't... I'm not sure why.

myermian 2010-09-07 16:49:21

Have you ensured that you are calling the jQuery library into the page?

Ant Ali 2010-09-08 09:45:43

@Ant Ali: yes, somehow I got past that issue, but other issues arose when changing margins and paddings through css... if I set the body margin (top, left, right, bottom) to 0 it didn't work. If I left the bottom off I would have a blank space below. If I set it to 1 then I had a 1px margin at the bottom, etc. Weird side effects.

myermian 2010-09-08 20:15:37

@myermian, You will have to add more javascript to deduct padding and many margins from the height of your div's.

Ant Ali 2010-09-09 13:53:11

Answer 3

A:

Why use JavaScript when this can be done with CSS?

Firstly set the margin to 0

*{margin: 0;}

Make sure the page fills the browser in height wise

html,body{height: 100%;}

Create the content to fill 100% just remove the height of the footer

#content{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -200px;
}

then set the height of the footer, make sure its the same as the margin in #content

#footer{height: 142px;}

Jobs a good one :)

RobertPitt 2010-09-07 16:33:39

nope, the footer height has to be adjusted to the remainder of the page, not a static 142px.

myermian 2010-09-07 17:45:20

Answer 4

A:

cripox 2010-09-07 16:34:28

This might sound crazy, but I actually needed the footer to be on top of the in terms of z-index... it has a semi-transparent background color so the page background shows through slightly.

myermian 2010-09-07 16:41:46

I didn't understand: you need it to be on top of content? If you need the footer to be just on top of other background you can still use footer:z-index:100 but make the content:z-index:101;

cripox 2010-09-07 16:53:13

z-index:101?? why 101, it does not need a z-index as the element is already at the top, its a parent of body, not a parent of any other element inside the body !

RobertPitt 2010-09-07 17:01:45

@RobertPitt - you're right, my mistake, sorry

cripox 2010-09-07 17:17:22

Well, the attempt was to try to get it to not be locked into place, so this would not be a solution for the current problem.

myermian 2010-09-07 19:04:51

Answer 5

+1 A:

You can 'fake' it with just CSS. Example:

<div id="footer-background"></div>
<div id="content"></div>
<div id="footer"></div>

CSS:

#footer-background {
  position:absolute;
  width: 100%; // or the width of your content depending on if its fixed width, etc
  height: 100%;
  z-index: -1;
  margin: 0 auto; // if you use a fixed width this will center it
  top: 0;
  background: #000;
}

#content, #footer {
  position: relative;
  width: 100%; // or fixed width
  margin: 0 auto; //if you use a fixed width this will center it
  background: #fff;
  clear: both;
}

#footer {
  background: #000;
}

What this does is set an empty div that contains the same background css as the footer but it actually fills the whole page. (height and width). The content has a white background so it will overlap the footer-background as far as the content height. Then your footer will scale according to your footer content but from a visual perspective the footer will appear to take up the rest of the page if it doesn't scroll.

Mark 2010-09-07 16:42:42

Answer 6

A:

Simple solution:

body {
min-height: 100%;
position: relative;
}

#footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}

Adding these properties / rules to your css should do what you're looking for. Let me know if it works.

Josiah Sprague 2010-09-07 17:05:46

Answer 7

A:

If you do use a script to size the footer, be sure to call the same function on resize events.

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>untitled</title>

<style>
#footer{border:blue solid thick; position:relative}
</style>

<script>
window.onload= window.onresize=function(){
    var b=document.documentElement.clientHeight, 
    f=document.getElementById('footer'),h=f.offsetTop,
    hx= Math.floor(.96*(b-h));

    f.style.height= hx+'px';
}
</script>

</head>
<body>

<h1>h1</h1>
<div>content</div>
<div id="footer">footer</div>
</body>
</html>

kennebec 2010-09-07 19:12:41

ansaurus

tags:

views:

answers:

HTML CSS Remainder of space

related questions