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

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