Question

我正在尝试使用100％宽度的页眉和页脚创建布局，而容器的宽度为940px。我在博客和新闻网站上看到过这样的例子。它不是浮动包含的内容，而是固定在页面的顶部和底部。

我创建的网站也只有几页，所以我把导航放在标题中。导航以绝对定位为中心。

当我缩小窗口时（在任何浏览器中），除了我看到覆盖标题下方内容的白色背景外，所有内容都保留在原位。我不知道为什么会这样，但我认为下拉菜单可能会导致问题。感谢

这是我的CSS代码：

body,html,ul,li{
        margin:0;
        padding:0;
        color:#000;
    }

#wrap-head {
        width:100%;
        margin:0 auto;
        background-image:url('header-bg.png');      
    }

#header {
        width: 940px;
        height: 140px;
        max-height:130px;
        position: relative;
        margin-left:auto;
        margin-right:auto;
        padding: 0;
        clear:both;
        background-color: white;
    }

.logo {
    position: absolute;
    top:0;
    left:0;
}   

#nav {
        position:absolute;
        top:48px;
        left:470px;
    }
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    /* Clear floats */
    float:left;
    z-index:5;
}

#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:6px;
    color:#fff;
    background:#0066ff;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#0066ff;
    text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
}
#nav ul li{
    padding-top:1px; 
    float:none;
    left:0px;
    background:#ccc;
}
#nav ul a{
    white-space:nowrap; 
}
#nav li:hover ul{ 
    left:0; 
}
#nav li:hover a{ 
    background:#0066ff;
    text-decoration:underline;
}
#nav li:hover ul a{ 
    text-decoration:none;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}



/*-- MAIN BODY STYLES --*/
#wrap-body {
    width:100%;
    margin:0 auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 0.875em;
    background-color: black;
    overflow:hidden;
    }

    h2 {
        margin:0 0 1em;
    }

    #container {
        width:940px;
        margin:0 auto;
        overflow:hidden;
        background-color: #666666;
        }

    #content {
    float:left;
    width:640px;
      padding:5px 10px;
      background-color:#666666;  
    }
    #sidebar {
        float:right;
        width:260px;
       padding:5px 10px;
        background:#CCC;
    }
    #footer {
        clear:both;
        padding:5px 10px;
        background:#333;
    }
    #footer p {
        margin:0;
        color:#FFF;
        font-family:Verdana, Geneva, sans-serif;
        font-size:12px;
    }
    * html #footer {
        height:1px;
    }
    #footercontent {
        margin-left:auto;
        margin-right: auto;
        width: 940px;
        height:126px;
        padding:0px;
        clear:both; 
    }

这是HTML

<body>
    <div id="wrap-head">
        <div id="header">
            <img class="logo" src="logotest.gif" width="280" height="110" />
            <ul id="nav">
                <li>
                    <a href="#" title="Return home">HOME</a>
                </li>
                <li>
                    <a href="#" title="About the IMHS">ABOUT IMHS</a>
                    <ul>
                        <li>
                            <a href="#">Introduction</a>
                        </li>
                        <li>
                            <a href="#">Mission Statement</a>
                        </li>
                        <li>
                            <a href="#">Member Profiles</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" title="News">NEWS</a>
                </li>
                <li>
                    <a href="#" title="Features">FEATURES</a>
                    <ul>
                        <li>
                            <a href="#">Articles</a>
                        </li>
                        <li>
                            <a href="#">Book Reviews</a>
                        </li>
                        <li>
                            <a href="#">Monthly Feature</a>
                        </li>
                        <li>
                            <a href="#">IMH Schoolhouse</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" title="News">LINKS</a>
                </li>
            </ul>
        </div>
    </div>
    <!--END OF NAVIGATION-->
    <!--END OF NAVIGATION-->
    <div id="wrap-body">
        <div id="container">
            <div id="content">
                <h2>Column 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                <h3>Consectetuer adipiscing elit</h3>
                <p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            </div>
            <div id="sidebar">
                <h2>Column 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
            </div>
        </div>
        <div id="footer">
            <div id="footercontent">
                <p>aaaaa aaaa </p>
            </div>
        </div>
    </div>
</body>

由于

Answer 1

你应该给身体最小宽度

    body{
            min-width:940px;
}

或查看带有更新代码的实时演示： - http://jsfiddle.net/WnecH/1/

浏览器窗口大小调整会影响CSS布局

1 个答案: