0

私はこの単純なページレイアウトを持っています:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">        
        <meta name="viewport" content="width=device-width">
        <style>
            body {
                text-align: center;
                margin: 0;
                padding: 0;
            }
            .header {
                width: 100%;
                height: 50px;
                background: url('http://tinyurl.com/o8w87av') 50% 0 no-repeat;
            }
            .outer {
                width:960px;
                height: 300px;
                background: #dadada;
                margin: 0 auto;
            }
            .footer {
                width: 100%;
                height: 50px;
                background: #000;
            }
        </style>                        
    </head>
    <body>
        <div class="header"></div>
        <div class="outer"></div>
        <div class="footer"></div>
    </body>
</html>

デスクトップでは正常に動作しますが、モバイルまたはタブレットでは動作しません。width: 100%; に問題があると思います。しかし、私はそれを解決する方法を理解できません。

私が見つけたいくつかの興味深いこと：

  1. この HTML+CSS コードを jsfiddle ( http://jsfiddle.net/STXmQ/ ) に配置すると、モバイルやテーブルと同じ問題が発生します。
  2. しかし、デスクトップで jsfiddle をフルスクリーン モード ( http://jsfiddle.net/STXmQ/embedded/result/ ) にすると問題なく、モバイルとテーブルでも問題ありません!!

私のレイアウトのオンライン版

助けてくれてありがとう！

解決済み: Maximilian Hoffmann のアドバイスのおかげで、私はそれを理解することができました。min-width: 960px をヘッダーとフッターに追加するだけで、正しく機能するようになりました。

4

2 に答える 2

-1

マクシミリアン・ホフマンのアドバイスのおかげで、私はそれを理解することができました. min-width: 960px をヘッダーとフッターに追加するだけで、正しく機能するようになりました。

于 2013-10-05T21:35:52.587 に答える