具有不同頁邊顏色和居中內容的網頁

Question

我想構建一個頁面，其中的內容居中但響應 - 它應該具有960像素的最大寬度，但是如果窗口大小減小則應該減小。 與此同時，我想在這個頁面的左右邊緣以不同的顏色顯示背景。 我該如何做到這一點？ 如果我在主div上使用margin：0 auto，我無法控制背景。

Answer 1

http://jsfiddle.net/iambriansreed/Sw9ae/

HTML

<div class="left"></div> 
<div class="right"></div> 
<div class="centered">centered</div> 

CSS

.left,.right { 
    position: absolute; 
    width: 100px; 
    top: 0; 
    bottom: 0; 
} 
.left { 
    left: 0; 
    background: blue; 
} 
.right { 
    right: 0; 
    background: red; 
} 
.centered { 
    position: relative; 
    margin: 0 auto; 
    max-width: 400px; 
    background: #ccc; 
}​ 

Answer 2

對於內容，你將有

<div id="page"> 
    <div id="content"></div> 
</div> 

，如果你把你的CSS文件

page { 
    width: 100%; 
    background: #333; } 

content { 
    width: 100%; 
    max-width: 960px; 
    margin-left: auto; 
    margin-right: auto; } 

的背景顏色，你可以嘗試一些像這樣的技巧（這將適用於內容）

border-right: 10px solid #blue; 
border-left: 10px solid #white; 

Answer 3

就讓它有一個max-width和百分比寬度，兩側緣汽車。 如果你想有一個多色的身體背景，你可以在背景上放置兩個盒子，並給每個不同的顏色。例如，將背景中的那些背景定位爲負z-索引，以便其餘部分停留在視口上。在這裏，我把它給你：

來源：http://jsfiddle.net/p8ZNz/4/

全屏查看：http://jsfiddle.net/p8ZNz/4/embedded/result/

CSS：

#left{ 
width:50%; 
height:100px; 
position:absolute; 
top:0; 
left:0; 
background-color:red; 
z-index:-1; 
} 
#right{ 
width:50%; 
height:100px; 
position:absolute; 
top:0; 
left:50%; 
background-color:blue; 
z-index:-1; 
} 
#content{ 
position:relative; 
width:90%; 
height:100px; 
max-width:960px; 
margin:0px auto; 
background-color:green; 
color:#FFF; 
} 

背景將保持50％-50所有寬度爲％，如果調整窗口大小，則居中框將長大它達到960px寬。如果你想要背景完整，請給它100％的高度！