固定體佈局內的全寬Div

我正在爲我的網頁模板創建修補佈局（960像素寬）。但是我希望我的菜單欄的寬度與瀏覽器的寬度相同（這意味着儘可能無邊距地儘可能寬）。固定體佈局內的全寬Div

CSS身體：

body{ 
    width:960px; 
    min-width:960px; 
    margin:auto auto; 
}

我怎樣才能做到這一點？

像這樣的佈局：http://www.google.com/analytics/index.html （注意身體的固定寬度和菜單欄比寬）

來源

2013-02-20 David Sebastian

我認爲你想要的是將你的內容放在960像素的區域中，但是能夠擁有其他內容（這裏是你的菜單），它可以是整個頁面的大小。爲了做到這一點，你不能像你那樣設置身體的寬度。相反，你應該有一些HTML這樣的：

<html> 
<head> 
    : 
</head> 
<body> 
    <div id="ContentBox"> 
    : put your content here 
    </div> 
    <div id="Menu"> 
    : Menu content here 
    </div> 
</body> 
</html>

然後在你的CSS：

#ContentBox { 
    margin: 0 auto; 
    width: 960px; 
} 
#Menu { 
    /* Whatever is applicable */ 
}

而對於谷歌Analytics（分析）的網站，他們在全寬頁面的獨立的部分，用色，邊界等定義，然後像上面在每個部分中描述的#ContentBox一樣。你甚至可以把它通用類和重用，如：

<body> 
    <div id="HeaderBar"> 
    <div class="ContentBox"> 
     : 
    </div> 
    </div> 
    <div id="GreyBGRegion"> 
    <div class="ContentBox"> 
     : 
    </div> 
    </div> 
</body>

CSS：

#HeaderBar { 
    border-bottom: #CCCCCC 1px solid; 
    background-color: #000000; 
    color: #FFFFFF; 
} 
#GreyBGRegion { 
    border-bottom: #CCCCCC 1px solid; 
    background-color: #F0F0F0; 
    color: #000000; 
} 
.ContentBox { 
    margin: 0 auto; 
    width: 960px; 
}

來源

2013-02-20 04:48:29

尼斯的答案！除此之外，沒有其他可行的方法嗎？只是好奇！ – 2013-02-20 04:56:46

是的，可能有很多不同的方法來實現這一點，比如編碼器的版本。這正是我需要做這種多區域設置時的做法。我儘量避免調整身體本身的尺寸，因爲它可能會導致您後來看到的混亂問題。特別是因爲像各種瀏覽器中的填充和顯式寬度/高度等事情都有所不同。 – 2013-02-20 05:02:24

你可以這樣來做：DEMO

#header{  
float:left; 
padding:15px 0; 
width:100%; 
}

來源

2013-02-20 04:45:34 coder

固定體佈局內的全寬Div

回答

相關問題