简化：定义div min-width时移动设备上的空白区域

Problem: White space appears at bottom of page on mobile Chrome.

问题:移动Chrome上的页面底部显示空白区域。

I gutted everything to isolate the problem. There's now a single div. Page takes up full viewport just fine, until I define a min-width for the div.

我掏空了一切来解决问题。现在有一个div。页面占用完整的视口就好了,直到我为div定义了一个最小宽度。

I tried a css reset. Did not solve problem.

我试过css重置。没解决问题。

Am I just not properly using min-width?

我只是没有正确使用最小宽度?

Edit (link to page): http://www.hauntedbuckscounty.com/Tools/Environment.php

编辑(链接到页面):http://www.hauntedbuckscounty.com/Tools/Environment.php

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Haunted Bucks County (HBC)</title>

    <!-- jQuery -->
    <script type="text/javascript" src="http://www.hauntedbuckscounty.com/jquery-2.1.1.min.js"></script>

    <link rel="stylesheet" href="http://www.hauntedbuckscounty.com/style_theme.html">
    <link rel="stylesheet" href="http://www.hauntedbuckscounty.com/CSS/reset_main.css">
    <link rel="stylesheet" href="http://www.hauntedbuckscounty.com/CSS/reset_normalize.css">
    <link rel="stylesheet" media="(min-width: 1200px)" href="Carousel_1200px.css">
    <link rel="stylesheet" media="(max-width: 1199px) and (min-width: 0px)" href="Carousel_768px.css"> <!--MIN NORMALLY 768 BUT TEMPORARILY SET TO ZERO TO ALLOW LATER DEV OF MOBILE VERSION-->
    <style>
        * { border: 0px solid red; }

        html {border:0px blue solid;}
        footer {
            margin-top: 0px;
            padding-top: 0px;
        }
    </style>
</head>
<body style="background-image:linear-gradient(#0E0E0F 70%, #1B1B1C);border:0px white solid;">

<div id="Nav" style="position:relative;height:50px; width:100%;min-width:650px;
                     background-color:blue;">
</div>



</body>
</html>

1 个解决方案

#1

If you want to create a responsive layout, for mobile devices, you should never use static min-width values, as there are many devices with different screen resolutions.

如果要为移动设备创建响应式布局,则不应使用静态最小宽度值,因为有许多设备具有不同的屏幕分辨率。

To solve your issue just don't use the min-width property, rather just use width: 100% for the media query that you prefer, i.e.

要解决您的问题,请不要使用min-width属性,而只需使用width:100%来表示您喜欢的媒体查询,即

@media screen only and (max-width: 767px) {
  #Nav { width: 100%; }
}

If you continue to use min-width for responsive layouts, you will always end up with a ugly scrollbar or unwanted widths of elements inside your website.

如果继续使用最小宽度进行响应式布局,则总会在网站内部出现难看的滚动条或不需要的元素宽度。

#1