问题： 移动版 Chrome 页面底部出现空白。
我把所有东西都清空了以找出问题所在。现在只有一个 div。页面占据整个视口就好了，直到我为 div 定义了最小宽度。
我尝试了css重置。没有解决问题。
我只是没有正确使用min-width吗？
编辑（链接到页面）： 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>
如果您想为移动设备创建响应式布局，则永远不应该使用静态最小宽度值，因为许多设备具有不同的屏幕分辨率。
要解决您的问题，请不要使用
min-widthwidth: 100%@media screen only and (max-width: 767px) {
#Nav { width: 100%; }
}
如果您继续对响应式布局使用最小宽度，您最终总会遇到丑陋的滚动条或网站内不需要的元素宽度。
将代码添加到主 css 文件对我有帮助：
html,
body {
overflow-x:scroll;
}
这样，用户将看不到空白区域，并且他将能够滚动到页面内容的任何角落（与溢出-x：隐藏不同）。