CODEWITHSUNDEEP
cssgoogle-chromeheight
jtarr523
jtarr523

Reputation: 361

HTML and Body Viewport issue

I have a website at filmblurb.org.

The page-container of my site extends to the bottom of the window when you scroll out to make for a 100% CSS layout style, but for some reason even when the height is 100% for both the body and tag, those two elements go about halfway down the page and then stop when the viewport is zoomed out. When I'm profiling those elements in Google Inspect Element that is. My page-container is currently min-height: 100%, but that for some reason actually does extend to the bottom of the viewport when zoomed out.

I've also taken screenshots of what I'm seeing to give you a better idea. Here they are [link]i917.photobucket.com/albums/ad16/jtarr523/… (for the body) and

enter image description here

(for the HTML)...Both are not extending to the bottom.

Anybody know how to fix this?

I would appreciate it.

Upvotes: 3

Views: 4517

Answers (2)

David John Welsh
David John Welsh

Reputation: 1569

Not sure exactly if it would work with browser zoom, but in my experience (and according to this question) you need to set the html tag height to 100% if you are setting container elements to min-height: 100%.

html { height: 100%; }
body { min-height: 100%; }

Replace body with a reference to your main container and it should still work. As far as I can tell there are no adverse reactions to setting html to 100%; it doesn't cut the page off or mess up any other styles.

Like I said, I'm not 100% sure this is related to your problem, but it's probably worth a shot.

Upvotes: 0

Brilliand
Brilliand

Reputation: 13724

min-height: 100% on the html element means that that element will be at least as tall as the viewport. It does not mean that it will always extend to the bottom. If you scroll down, then you may still be able to scroll below the bottom of the <html> element.

The only way to prevent this (short of JavaScript) is to ensure that all elements on the page (that is, everything that could possibly cause a scrollbar) is kept within the html element. A simple way to force this is to put overflow: hidden on your html element:

body {
    overflow: hidden;
}

If the problem is being caused by a float, then that will solve it. If the problem is caused by an absolute-positioned element or a negative bottom margin on the last element, then that will replace your problem with a more serious one: the page will be cut off at the bottom of the html element. You will then have to find the problem element some other way.

(The same applies to the body element; it will need its own overflow: hidden; to ensure that nothing can extend beyond it.)

Upvotes: 3

Related Questions