1

I'm looking for a way to add a footer to my page which will always show up at the bottom. The problem is, a lot of the content on the page is set via position: absolute;, so at the moment, unless I manually give the footer a margin-top: 900px; value, its simply hidden by one of the absolute positioned content. But on some pages where the content is less than 900px, there is an unnecessary gap at the bottom between the end of the page, and the footer.

How can I resolve this in such a way that there's no gap between the end of content and footer?

Ali
  • 261,656
  • 265
  • 575
  • 769
  • See this question: http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space – SShaheen Jan 15 '13 at 21:11
  • Also, this: http://stackoverflow.com/questions/4154220/html-5-footer-tag-be-always-at-bottom/4154509#4154509 – SShaheen Jan 15 '13 at 21:14

6 Answers6

1

In the new jquery, you can just use this:

<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>

from http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html

Sudipta Chatterjee
  • 4,592
  • 1
  • 27
  • 30
1

Put everything before the footer in a div with position relative. This div will flex vertically to the content in it and will provide the buffer to keep anything after it right below it. No margin needed.

user1934286
  • 1,732
  • 3
  • 23
  • 42
1

You also can put indexes. z-index: 1;

http://www.fiveminuteargument.com/fixed-position-z-index

In your case, put z-index in css for footer at 10 or more.

Belhor
  • 920
  • 6
  • 8
0

Let's suppose a <footer>, styled with display: block and height: 250px.

So all you have to do to achieve what you want is add:

position: fixed;
top: 100%;
margin-top: -250px;

That's it. It'll be permanently aligned at the bottom. :)

Alvaro Lourenço
  • 1,321
  • 1
  • 10
  • 21
0

Sticky footer. No javascript required:

http://www.cssstickyfooter.com/

tahdhaze09
  • 2,220
  • 1
  • 21
  • 36
0

After doing some fiddling I was reminded that absolute positioning removes the element from the document flow. You cannot depend on an absolute positioned element to affect the other elements because it will not. Because you do not know the height of the content then using margin-top is clearly not option.

So I came up with this: basically do a normal layout with floats then use position relative to move the items where you want them. This way the elements still affect the document flow, however, now you have total control over the position. This is precisely what relative positioning is for: You want total control over the position of an element but you still want they element to affect the layout normally.

<html>

<head>

<style>

body {
    text-align:center;
}
#container {
    position:relative;
    margin:0 auto;
    width: 1000px;
    text-align:left;
}
#header {
    position:relative;
    top:0px;
    left:0px;
    width:1000px;
    height: 100px;
    border:solid 1px #000;
}
#sidebar {
    position:relative;
    top:10px;
    left:0px;
    width:300px;
    height: 500px; /* for demo */
    float:left;
    margin-bottom: 20px;
    border:solid 1px #000;
}
#main {
    position:relative;
    top:10px;
    left:310px;
    width:690px;
    height: 200px; /* for demo */
    margin-bottom:20px;
    border:solid 1px #000;
}
#footer {
    margin:0 auto;
    top:20px;
    width: 1000px;
    text-align:left;
    height: 100px;
    clear:both;
    border:solid 1px #000;
}
</style>
</head>
<body>

<div id="container"> <!-- Holds all the content except the footer -->

<div id="header">Header content here</div>
<div id="sidebar">Sidebar content here</div>
<div id="main">Main content here</div>

</div>

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

</body>

</html>
user1934286
  • 1,732
  • 3
  • 23
  • 42