调整浏览器窗口大小时，Div 元素的行为很奇怪答案

【问题标题】：Div elements behave weird when resizing the browser's window调整浏览器窗口大小时，Div 元素的行为很奇怪
【发布时间】：2013-09-11 22:20:07
【问题描述】：

我为网站制作了一个模板，问题是当我调整浏览器窗口的大小或者我在手机或平板电脑上时，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>

【问题讨论】：

删除标题 div 上 960px 的显式宽度，它看起来没问题。还是我错过了问题？
它在.wrapper 类中，所以如果我删除它，我会毁掉整个设计！

标签： css html html5boilerplate

【解决方案1】：

这些都是 CSS 问题。在宽度方面，您的标题 (<div class="wrapper clearfix">...</div>) 中有一个元素，其显式宽度为 960 像素。 header、div.hero 和 footer 的宽度将由浏览器窗口的宽度给出。因此，如果浏览器窗口的宽度小于 960 像素，则会导致 div.wrapper 溢出，从而导致显示不需要的黄色部分。

您可能想要做的是在您的身体元素上设置min-width: 960px;。

【讨论】：