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

by

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/

More Related Contents:

  1. How would I achieve a shadow that won’t show through transparent text?
  2. Fill in text in HTML5
  3. Invert rounded corner in CSS?
  4. CSS Property Border-Color Not Working
  5. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  6. Changing three.js background to transparent or other color
  7. Failed to decode downloaded font
  8. Borders disappear in Chrome when I zoom in
  9. How can I ensure that text is inside rounded div?
  10. Which HTML5 reset CSS do you use and why? [closed]
  11. Div height 100% and expands to fit content [duplicate]
  12. Giving a border to an HTML table row,
  13. Add a text suffix to
  14. html5 vertical spacing issue with
  15. How to position a div in the middle of the screen when the page is bigger than the screen
  16. How can I apply a border only inside a table?
  17. Nested rows with bootstrap grid system?
  18. How to write a caption under an image?
  19. How do I line up 3 divs on the same row?
  20. CSS: How to align vertically a “label” and “input” inside a “div”?
  21. Div side by side without float
  22. Best replacement for font tag in html
  23. Full background image with fade effect
  24. Border around specific rows in a table?
  25. There is a 4px gap below canvas/video/audio elements in HTML5
  26. How can I align 3 divs side by side?
  27. Removing the Bevel Effect on the Corner of Borders
  28. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  29. 100% DIV width is not really 100%
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment