0

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

1 回答 1

1

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

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

于 2013-09-11T22:47:02.523 回答