Mysterious White Space at bottom of Web Page in Mobile-Chrome

问题

I've looked at many "mysterious white-space at bottom of page" issues here on SO, and played with the viewporttag many times, but I still cannot figure out what I'm doing wrong!

The page in question is: http://www.seniorchoicesunl.com/error_documents/error401.php

Here's what it looks like on mobile from Chrome Dev Tools:

Any Ideas on what I'm doing wrong?

Edit:

setting ANY initial-scale is bad news! It makes the font too tiny! Take a look:

The desired mobile look, while keeping the desktop and tablets as-is, is this:

P.S. Fixing this issue could reciprocally fix other related issues I'm having with other webpages.

回答1:

Add this on top of your css file :)

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

it fixed the bug for me.

回答2:

This seems to fix the problem:

Change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Override width: 25em; on .sub_container_div in your mobile CSS so that the container scales with the width of the view.

If you do not want the font to scale, it seems just adding initial-scale=0 will work as well. However, this will make the text very hard to read. You can play around with different scales, but it seems just setting it will fix your issue.

回答3:

What's going on here:

You've set width=device-width, this makes the layout size on your page equal to the device's screen width. i.e. making an element 100% will give it the same width as the screen.
Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
The sub_container_div element actually ends up being much wider than the layout width of the page. In my case on a Nexus 6, the device-width is 412px while the sub_container_div is 594px wide.
Since the content is wider than device-width, Chrome allows zooming out and loads the page at the minimum zoom level but this doesn't change the layout width/height so height 100% only fills device-width/aspect ratio pixels, which doesn't fill the zoomed out viewport.

The correct way to fix this is to make sure all your content is contained by the layout size. In your case, the reason the sub_container_div is wider than the layout size is that your padding/margins cause it to expand outside the parent. The solution is to add box-sizing: border-box to the sub_container_div and dialog elements and width: 100% to sub_container_div. That way, Chrome can't zoom out and you can't see outside the layout box (in HTML spec language, that's the initial containing block).

回答4:

I had the same issue on Chrome 77

I fixed the problem by removing height: 100vh on the body tag.

来源：https://stackoverflow.com/questions/39070028/mysterious-white-space-at-bottom-of-web-page-in-mobile-chrome

标签

html

css

viewport

mobile-chrome