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 回答