CODEWITHSUNDEEP
javascriptjqueryhtmlcss
myermian
myermian

Reputation: 32515

HTML CSS Remainder of space

How do I get the footer to take up the remainder of the page's vertical space without actually knowing how tall the content is? I can't figure out how to use javascript/css to accomplish this...

Just to be clear...

Scenario 1: The content ends halfway through the page, the footer would take up the remaining half. No scrollbars necessary.

Scenario 2: The content takes up 1 1/2 pages, the footer would take up only what it needs (~200px). Scrollbars necessary.

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

Oh, and I'm open to a jQuery way of doing this.

Upvotes: 8

Views: 938

Answers (7)

Ant Ali
Ant Ali

Reputation: 380

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

Upvotes: 3

kennebec
kennebec

Reputation: 104770

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>

Upvotes: 0

Jo Sprague
Jo Sprague

Reputation: 17363

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.

Upvotes: 0

Mark
Mark

Reputation: 5720

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.

Upvotes: 1

cripox
cripox

Reputation: 542

No need to use javascript! You can use only css for this:

#footer {
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index:-100;
/* height: 100%; you don't need this, but you can put it to be sure */

}

What it does is position this layer on the whole screen (relative to the screen- not page, so it will have the same position after you scroll also) and put it far behind the other layer (z-index: -100)

Upvotes: 0

RobertPitt
RobertPitt

Reputation: 57268

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 :)

Upvotes: 0

jwueller
jwueller

Reputation: 30996

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.

Upvotes: 1

Related Questions