我为网站制作了一个模板，问题是当我调整浏览器窗口大小时或者我在手机或平板电脑上时，head、footer和 div.hero 被“切掉”。这是一个带有 css 重置的 html5b 模板，但没有响应。
这是 HTML:
(我还弄乱了这个 HTML 和我使用的 css。如果你向右滚动，你就会看到我在说什么。http://jsfiddle.net/S77FC/2/。但请记住 head 没有出现在那里，以防“错误”在那里)
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/css/main.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"> <\/script>')</script>
<![endif]-->
</head>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<body>
<header>
<div class="wrapper clearfix">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li class="right"><a href="#">Sit Amet</a></li>
</ul>
</nav>
</div>
</header>
<div class="hero">
<div>
<h1>Lorem ipsum dolor sit amet.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
</div>
</div>
<div id="main" class="wrapper clearfix">
<div class="infobox">
<h3>Lorem ipsum.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="infobox">
<h3>Lorem ipsum.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="infobox">
<h3>Lorem ipsum.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<footer>
<div id="top">
<div class="wrapper clearfix">
<div class="footerbox">
<h3>Lorem ipsum</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
</ul>
</div>
<div class="footerbox">
<h3>Support</h3>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js </script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="../js/main.js"></script>
</body>
</html>
最佳答案
这些都是CSS问题。
在宽度方面，您的 header ( <div class="wrapper clearfix">...</div> ) 中有一个元素，其显式宽度为 960px。 header、div.hero 和 footer 的宽度由浏览器窗口的宽度决定。因此，如果浏览器窗口宽度小于 960 像素，则会导致 div.wrapper 溢出，从而导致显示不需要的黄色部分。
可能你想做的是设置min-width: 960px;在你的 body 元素上。
关于css - 调整浏览器窗口大小时，Div 元素的行为很奇怪，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18752245/