How to Get a Floating Footer to Stick to the Bottom of the Viewport in Ie 6

How do I get a floating footer to stick to the bottom of the viewport in IE 6?

This may work for you. It works on IE6 and Firefox 2.0.0.17 for me. Give it a shot. I made the footer's height very tall, just for effect. You would obviously change it to what you need. I hope this works for you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Liquid Footer</title>
    <style type="text/css">
    .footer {
background-color: #cdcdcd;
height: 180px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed;
left: 0px;
bottom: 0px;
}
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    body {height:100%; overflow-y:auto;}
    html {overflow-x:auto; overflow-y:hidden;}
    * html .footer {position:absolute;}
    </style>
    <![endif]-->
</head>

<body>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   <div class="footer">-- This is your liquid footer --</div>
</body>
</html>

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Site layout with dynamic sticky footer that works back to IE6 with no JS: Is it possible?

A dynamically-sized sticky footer is tough, because you also then need to dynamically size the main content view so that scrolling works correctly, but CSS is not a dynamic programming language.

The closest I think you're going to be able to get even with current CSS ("current" of course completely rules out IE6) is to use percentages. The problem with percentages is that the footer won't be dynamically sized to the content of the footer, it'll be sized to your best guess as to the percentage value to use. It won't be satisfactory.

You said you want to avoid JavaScript "hacks," but nevertheless you could almost certainly pull this off with JavaScript, setting the footer to be absolutely positioned, with the bottom position nailed to 0 (zero), and write an event handler which detects changes in the height of the footer and resizes the main content window appropriately.

I don't know that I'd call that a "hack" in a pejorative sense. It's just code, doing what you tell it to do. Of course, if corporate (or other) policy where you're trying to implement this won't permit the use of JavaScript, that's another matter. And given what a security travesty 14 year old IE6 is at this stage of the game, I'd actually be one of the ones in favor of disabling JavaScript. But that, of course, rules out being able to deploy any remotely modern facsimile of an "app." By modern, of course, I simply mean the types of user-friendly feedback that I was designing into thick client apps over 20 years ago, and which have only become truly possible in web browsers since the "Web 2.0" web-standards days. IE6, of course, predates even that.

Providing full support for IE6 can be a tall order.

Are you sure you can't specify that your app needs to run on a modern browser? The very latest versions of Chrome and Firefox can still be installed on Windows XP, and anybody who doesn't believe new versions of Chrome or Firefox are vastly more secure than ancient, bug-riddled IE6 is fooling themselves. Having said that; if you're still running Windows XP, you have very serious security problems just waiting to bite you.

How to stick a footer to bottom in css?

Try setting the styles of your footer to position:absolute; and bottom:0;.

css footer position stick to bottom of browser?

This is always a bit difficult, you could increase the min-height of your content area, but even then if someone has a really big screen you'd see the same thing.

You could use a bit of JavaScript to increase the min-height if someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.

If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult? may be of use to you.

floating footer always on the bottom and visible

Yes. It's the position: fixed property.

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

Demo: http://jsfiddle.net/ZsnuZ/

CSS For Variable Height Footer that Floats to Bottom of Page (Not Viewport)

So, I'm not 100% sure I understand the question, so going to repeat back my understanding.

You want the footer to always be below the rest of the content
If the page is less than the size of the viewport, you want the footer to be at the bottom of the viewport
If the page is greater than the size of the viewport, the footer should just be directly below the rest of the content.

Assuming this is the case, I think the simplest way to solve this is to set a min-height on your #app to be at least 100vh and use flexbox to expand the container to fill additional space if it exists.

Given your current HTML structure, this would look like:

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#container {
  flex-grow: 1;
}

You can see this in action here: https://codepen.io/kball/pen/YxmgBL

If my understanding of your question/desired outcome is incorrect, please let me know and I'll take another pass at it.

force footer on bottom on pages with little content

Update 2021 - CSS GRID

Here is a solution using CSS Grid, this is by far the best way to do it on 2021.

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "footer";
    grid-template-rows: 1fr 80px;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}

<body>
    <main>The content</main>
    <footer>Footer</footer>
</body>

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}