0

Web サイトのテンプレートを作成しましたが、問題は、ブラウザーのウィンドウのサイズを変更したり、携帯電話やタブレットを使用したりすると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>) 内に 960px の明示的な幅を持つ要素があります。ヘッダー、div.hero、およびフッターの幅は、ブラウザー ウィンドウの幅によって決まります。そのため、ブラウザ ウィンドウの幅が 960 ピクセル未満の場合、div.wrapper オーバーフローが発生し、不要な黄色の部分が表示されます。

おそらく、やりたいことはmin-width: 960px;body 要素に設定されています。

于 2013-09-11T22:47:02.523 に答える