How to Force a Div Block to Extend to the Bottom of a Page Even If It Has No Content

How do I force a DIV block to extend to the bottom of a page even if it has no content?

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

html,body { height:100%; }

You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.

This site has some excellent examples:

http://www.brunildo.org/test/html_body_0.html

http://www.brunildo.org/test/html_body_11b.html

http://www.brunildo.org/test/index.html

I also recommend going to http://quirksmode.org/

Extend div to bottom of page (only HTML and CSS)

Solution: #1: css tables:

html, body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
  margin: 0;
}
#top, #bottom {
  width: 100%;
  background: yellow;
  display: table-row;
}
#top {
  height: 50px;
}
#bottom {
  background: lightgrey;
  height: 100%;
}

html, body {  height: 100%;  width: 100%;}body {  display: table;  margin: 0;}#top, #bottom {  width: 100%;  background: yellow;  display: table-row;}#top {  height: 50px;}#bottom {  background: lightgrey;  height: 100%;}

<div id="top" style="height:50px;"><span>A header</span></div><div id="bottom" style="background:lightgrey;"><span>The content area - extends to the bottom of the page</span></div>

making a div extend all the way down to the bottom of the page

Take a look at excellent post at CSS-Tricks.Com:

A Bulletproof Sticky Footer, Woohoo!

See the demo here :)

How to make divs extend to the bottom of the page for every zoom

I have made a jsfiddle version of your page at here.

I believe this is the solution you were after, be warned it may not work 100% in all browsers but it gives you a starting point.

-UPDATE-

The previous jsfiddle URL I gave was incorrect, just changed it to the correct one (got the original one wrong, sorry)

How to make footer go to bottom when there isn't enough content on page

If you don't care about IE < 10 you can use flex.
It's really simple, but as mentioned it's only for "modern" browsers.

HTML:

<body>
    <main>
        <!-- main content goes here -->
    </main>
    <footer>

    </footer>
</body>

CSS:

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

main {
    flex: 1;
}

make element cover whole available space when there isn't enough content inside css

Use Flexbox, where you make the body a flex container with column direction, give the container flex: 1 to fill the remaining height and make that one also a flex container, with row direction, and finally give the main flex: 1 to fill the remain horizontally.

* {  margin: 0;}
html, body {  height: 100%;}
body {  display: flex;  flex-direction: column;}.container {  flex: 1;  display: flex;}main { flex: 1; background: lightblue;}

<div class="toolbar">  toolbar</div><div class="container">  <main>main</main></div>

How do I make my div with a background image and no content show and extend from the top to bottom of the page?

You could give the root element of your document (html) and the body a 100% height.

html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
div {
    float:left;
    min-width:100px;
    min-height:100%; 
    position: relative;
    background: red;
 }

http://jsfiddle.net/6f5x8/8/

How do I align a div at the bottom right corner of a web page even if the content is less?

Try this solution:

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

found here

EDIT: too late to remember how to do it or to explain it, but if you need more help search google for "sticky footer"