Question

我有一个网站模板，其中所有内容都在包装器<div>

中

HTML

<div id='wrapper'>
    <div id='contact'>
       an image 
    </div>
    <div id='header'>
       an image 
    </div>
    <div id='menu'>
        | menu 1 | menu 2 |
    </div>
    <div id='content'>
        jhskjhjkdhkjashklsajhkdjas
    </div>
    <div id='footer-wrapper'>
       <div id='footer'>
           footer content
       </div>
    </div>
</div>
<div id='gmap'>
       google map
    </div>

CSS

#wrapper {border:1px solid; max-width:500px; width:100%; margin-left:auto; margin-right:auto;}
#menu, #contact, #gmap   {background-color: #CCCCCC; width:100%;}
#footer {background-color:#FFFFFF; width:100%;}
#footer-wrapper {padding-top:5px; padding-bottom:5px; background-color: #000000;}

JS Fiddle

在设计中，我一直致力于设计工作，显示灰色和黑色在整个页面的宽度上扩展到wrapper之外，但其中的文本/内容保持与当前对齐（就好像仍然在#wrapper）

之内

目前我已经被教会将我想要扩展到wrapper之外的所有区域移动到他们自己的包装器div中，而实际的div以与包装器相同的方法居中。

然而，对我来说，这似乎很笨拙，好像有人想要改变#wrapper的宽度，同时保持内容的其余部分内联，他们必须在多个地方改变它。更不用说模板似乎有点减少，如果我必须打破它如此糟糕，所以我可以在整个页面上扩展颜色

我想知道是否有更好的方法可以在整个页面中展开#menu，#contact，#footer-wrapper，同时将其保留在#wrapper

内

注意：#wrapper的宽度保持不变。它只是<div>提到的背景颜色应该在#wrapper之外扩展，类似于This Site

Answer 1

如果我正确理解了您的问题，您可以在max-width内的每个div设置wrapper和居中内容，请参阅最小的演示。

＆＃13;

#wrapper {
    border: 1px solid blue;
}
#wrapper > div {
    border:1px solid black;
    max-width:500px;
    margin:0 auto;
}

＆＃13;

<div id='wrapper'>
    <div id='header'>1</div>
    <div id='content'>2</div>
    <div id='footer'>3</div>
</div>

＆＃13;

好吧，如果你真的需要内部div扩展到wrapper之外，那么它也是可能的。

＆＃13;

#wrapper {
    border:1px solid black;
    max-width:500px;
    margin:0 auto;
}
#content {
    border:1px solid blue;
    min-width:90vw;
    position:relative;
    left:50%;
    transform:translateX(-50%);
}

＆＃13;

<div id='wrapper'>
    <div id='header'>1</div>
    <div id='content'>2</div>
    <div id='footer'>3</div>
</div>

＆＃13;

Answer 2

你不需要#wrapper div。只需创建一个可重用的.content类。然后每个不同的部分将有这个内部内容div来居中你的conetnt并将其设置为正确的宽度

http://jsfiddle.net/vt2ma4p4/4/

<div class="header"> <!-- color goes on this div -->
   <div class="content">my content</div> <!-- width and centering on this one -->
</div>

.header {
   background-color: #eee;
}
.content {
   max-width: 500px;
   margin: 0 auto;
}

Answer 3

您可以根据自己的喜好调整#wrapper＆＃39; max-width 即1000px

或者更好的是，不要限制max-width。取决于您的需求。

#wrapper {
    border:1px solid;
    max-width:1000px; /* adjust width here or remove this line */
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

See updated fiddle

有没有更好的方法在包装器外扩展<div>？

3 个答案: