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

Question

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 w

Answer 1

I had the same issue on Chrome 77

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

Answer 2

This seems to fix the problem:

1. Change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width,initial-scale=1.0">.
2. 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.

Answer 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).

Answer 4

In my case one element was too long for a mobile screen and it broke the webflow. After I shortened the width of the long element, the extra white screen was also removed from the footer.

Answer 5

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.