3 
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <style>
        html {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body, div, span, applet, object, embed, iframe, pre, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, del, dfn, b, strong, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, table, tbody, dl, dt, dd, ol, ul, li, fieldset, form, button, label, legend, caption, hr, noscript {
            margin: 0;
            padding: 0;
            border: 0;
            outline: none;
            list-style: none;
            font-weight: normal;
            font-style: normal;
            font-size: 100%;
            font-family: inherit;
            vertical-align: top;
            text-decoration: none;
            position: relative;
        }

        body, html {
            height: 100%;
            border: none;
            top: 0;
            font: 12px/1.3 Helvetica, Arial, sans-serif;
            color: #131318;
            background: #E7E7E7;
            text-align: left;
        }

        .full {
            width: 100%;
            float: left;
        }

        .top {
            padding: 20px 0;
            background: #FF0000;
        }

        .center {
            width: 900px;
            margin: 0 auto;
        }

        .shell {
            width: 860px;
            padding: 20px;
            float: left;
            background: #FFF;
        }
        </style>
    </head>
    <body>
        <div class="full top">logo</div>
        <div class="full">
            <div class="center">
                <div class="shell">
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                </div><!--/.shell-->
            </div><!--/.center-->
        </div><!--/.full-->
    </body>
</html>

ここで確認できます(または、ここにアクセスして、水平スクロール バーが表示されるまでブラウザを縮小し、右にスクロールすると)、上部の赤いバーが、ビューポートの幅全体を埋めるのではなく、常にビューポートのサイズになります。ページ。どうすればこれを修正できますか? ビューポートのサイズ変更に関係なく (できれば JavaScript を使用せずに)、このようなバー (メニュー付きのヘッダーなど) を実際にページの幅いっぱいにするにはどうすればよいですか?

4

1 に答える 1

3

これは何度も聞かれました。コンセンサスは、divに最小幅を設定することです。

min-width: 960px;

その他の議論:

于 2012-09-16T01:25:06.220 に答える