固定宽度的网站，以响应

Question

我有一个固定宽度的布局我试图做出响应，我看了代码，当我在Dreamweaver中使用不同的视图时，#wrapper div没有调整到全宽。

页脚我得到一个滚动条，footer，slider，top-bg都没有全宽。但内容区域呢？

我将包装器更改为100％，认为这会调整页面中的所有内容以全屏移动但是没有用？

CSS：

/* Containers */

#wrapper {
    width:100%;
}
#top {
    width:900px;
    margin:0 auto;
}
#top-bg {
    background-color:#03274B;
    width:100%;
    overflow:auto;
}
#topnav {
    width:900px;
    margin:0 auto;
}
#topnav-bg {
    clear:both;
    background-color:#072C53;
    width:100%;
    padding:15px 0;
    border-top:2px #2B4D71 solid;
    border-bottom:2px #2B4D71 solid;
}
#banner-bg {
    width:100%;
    background-image:url(../images/bg/blue-bg.fw.png);
    background-repeat:repeat;
}
#banner {
    padding:0px 0;
    width:900px;
    margin:0 auto;
}
#subbanner {
    width:900px;
    margin:0 auto;
    padding:30px 20px;
}
#subbanner-bg {
    width:100%;
}
#subbanner h1 {
    font-size:48px;
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px #000 solid;
}
#content-wrap {
    width:900px;
    margin:0 auto;
}
#leftside {
    width:425px;
    margin-right:50px;
    float:left;
}
#leftside h2 {
    padding-bottom:10px;
    margin:20px 0px 10px 0px;
    border-bottom:1px #000 solid;
}
#rightside {
    width:425px;
    float:right;
}
#rightside h2 {
    padding-bottom:10px;
    margin:20px 0px 10px 0px;
    border-bottom:1px #000 solid;
}
#content {
}
#content-bg {
}
#content-wrap {
}
#footer {
    width:100%;
    margin:0 auto;
    padding:20px 0;
}
#footer-bg {
    clear:both;
    background-color:#03274B;
    width:100%;
}
#footer p {
}

Answer 1

如果不发布HTML标记，我们必须做出一些假设。我还建议您不要在Adobe Dreamweaver中使用设计视图，因为它们与浏览器呈现页面的方式关系不大，我建议您按F12（Windows）或option + F12（Macintosh）在首选浏览器中查看您的页面。

您发布的CSS看起来有点破碎，我假设top {...}之类的区域实际上#top {...}为top，因为#top { width:900px; margin:0 auto; } 是非标准元素。

话虽如此，你的CSS中还有一些区域，如：

id="top"

900px元素只有id="wrapper"宽，尽管它的父元素大小（可能是<div id="wrapper"> <div id="top"> <div id="top-bg"> </div> </div> </div> ）。

假设您的标记类似于以下内容：

#top-bg

尽管width: 100%有900px但它只有#top宽，因为它是{{1}}的子级，宽度百分比是相对于父容器的宽度