固定宽度的网站响应

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 标记的情况下，我们必须做出一些假设。我还建议您不要使用 Adob​​e Dreamweaver 中的设计视图，因为它们与浏览器如何呈现您的页面几乎没有关系，我建议您按 F12 (Windows) 或 option + F12 (Macintosh) 来查看您的页面您喜欢的浏览器。

您发布的 CSS 看起来有些损坏，我假设在 top {...} 等区域您实际上有 #top {...}，因为 top 是一个非标准元素。

话虽如此，您的 CSS 中仍有一些区域，例如：

#top { 
   width:900px;
   margin:0 auto;
}

带有id="top" 的元素将永远只有900px 宽，尽管它的父元素大小（可能是id="wrapper"）。

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

<div id="wrapper">
   <div id="top">
      <div id="top-bg">
      </div>
   </div>
</div>

尽管#top-bg 具有width: 100%，但它永远只会是900px 宽，因为它是#top 的子容器，并且宽度百分比与父容器的宽度相关。