100% height div tag not working. Argh!

Like a lot of people, I have depended on the knowledge that I can get a div to span the entire height of a web page if I do two things: first, the html and body tags need to be defined as height 100%. And second the tag in question, usually the wrapper tag or a navigation tag, must also have a 100% height applied.

And I swear this has worked in the past, but now it doesn’t seem to. I’m trying to overlay a 95% opaque (or 5% transparent) wrapper on top of the background exactly like you see on this blog, but for theAfterNet.net. But I want the background of the wrapper tag to extend the full height of the page, not just the visible portion of the page as defined by the browser’s viewport.

If you scroll to the bottom of this blog and then come back … I’ll wait … you’ll see there’s a little gap between the bottom of the wrapper div and the bottom of the browser viewport. But if I have a page with very little content, there might be a very large gap between the bottom of the wrapper’s content and the bottom of the viewport. That’s why I want the div to extend 100%.

I’ve tried adding min-height: 100% to the wrapper tag in the CSS; making the wrapper tag absolute; specifying the html and body tags as position: relative; and even an old trick of specifying 101% height. But nothing seems to work. It’s so frustrating when a tool fails to work, especially when you realize it’s been a long time since you used that tool so you don’t know when it worked.

PS I’ve discarded the idea of a javascript script that resizes the height of the wrapper tag by reading the size of the body element. I wanted a CSS solution.

Written by

Jennifer Petkus divides her time between writing Jane Austen-themed mysteries, creating websites for the dead, woodworking, aikido and building model starships. She has few credentials, having failed to graduate from the University of Texas with a journalism degree, but did manage to find employment at the Colorado Springs Sun newspaper as a cop reporter, copy editor and night city editor before the paper died in 1986. She has done little since. Her husband is the night editor at The Denver Post. Her best friend is a cop. She watched Neil Armstrong walk on the Moon live. She is the author of, Good Cop, Dead Cop: A Novel about the AfterNet. She’s writing the sequel, The Background Noise of Souls, and another AfterNet related story, Jane Austen’s Book Tour.

Leave a Reply