全寬度背景，沒有包裝

我正在一個網站工作，並認爲我會看看是否有更好的方法來達到相同的結果。全寬度背景，沒有包裝

問題：頁面由幾個部分組成，每個部分都有自己的背景，應該是瀏覽器的全部寬度。每個部分的內容都以960像素爲中心。目前，我正在將每個部分都包裝在一個看似簡單的包裝紙中。有沒有人有更好的soloution？

示例代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Problem Example</title> 

<style> 
    .content{ 
     width:960px; 
     margin: 0 auto; 
     padding: 90px 0; 
     background: rgba(0,0,0,0.5); 
    } 

    #header_wrapper{ 
     background: red 
    } 

    #content_wrapper{ 
     background: green 
    } 

    #footer_wrapper{ 
     background: yellow 
    } 
</style> 
</head> 

<body> 
<div id="header_wrapper"> 
    <div class="content"> 
     Header Content 
    </div> 
</div> 
<div id="content_wrapper"> 
    <div class="content"> 
     Content Content 
    </div> 
</div> 
<div id="footer_wrapper"> 
    <div class="content"> 
     Footer Content 
    </div> 
</div> 
</body> 
</html>

理想的解決方案：同一個頁面，但沒有3周額外的包裝的div。

建議任何人？

如果你想擁有動態的高度，而不是使用BG圖像

來源

2011-06-01 FearMediocrity

我把包裝ID放在內容divs並擺脫了外部的div，但隨後顏色變得更亮。你是否有0.5的alpha值，使它們變暗？ – paulmorriss 2011-06-01 12:50:13

任何人都要進行實驗的例子：http://jsfiddle.net/R4ZDX/ – Nick 2011-06-01 13:03:17

請不要在標題（b）中寫（a）標籤問候（c）謝謝;歡呼 – 2011-06-01 13:06:49

您的要求是矛盾的。

您指定三個部分中的每一個都應該跨越頁面的整個寬度（並且包含不同的背景），但每個部分的內容必須限制爲960像素。一個div不能同時具有100％寬度和960px寬度。如果你在混淆空格的時候做了一些JavaScript的魔術，如果沒有摺疊的div，你就無法實現這一點。

來源

2011-06-01 13:37:00 Kris

謝謝，那就是我的想法......我只是沒有想要成爲那些可能不需要時使用額外div的人。 – FearMediocrity 2011-06-02 18:33:21

，我認爲這是最好的做法

來源

2011-06-01 13:03:08 AlexC

像這樣的事情？

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Problem Example</title> 

<style> 
    .section{ 
     width:960px; 
     margin: 0 auto; 
     padding: 90px 0; 
     background: rgba(0,0,0,0.5); 
    } 

    .header {background: red } 
    .content {background: green } 
    .footer {background: yellow} 

</style> 
</head> 

<body> 
<div class="header section"> 
    Header Content 
</div> 
<div class="content section"> 
    Content Content 
</div> 
<div class="footer section"> 
    Footer Content 
</div> 
</body> 
</html>

來源

2011-06-01 13:07:31

，確實刪除了樣式化的div，但他正在尋找一種解決方案，其中的標題，內容和頁腳每個都有一個可擴展到瀏覽器寬度爲100％的背景 – MikeM 2011-06-01 13:30:48

你已經是相當實用的，也許替代方法是刪除你的content區域的包裝div並將其設置在body而不是。少量儲蓄，但少一個分。

來源

2011-06-01 13:37:08 MikeM

一種可行的方法是使用僞元素（：before，：after）將背景添加到具有固定寬度的容器的左側和右側。這將適用於簡單的背景，但如果您想要更復雜的圖像背景，可能會變得更快。

要了解更多關於此技術的信息，請在csstricks上查看this post。

來源

2012-02-16 16:21:33 ximi

我不知道這個問題的相關程度如何，但是當我正在尋找這個問題時，我發現了這個問題，並且可能還有人對我這個人感興趣。

稍微修改一下我實際上已經開始工作了，我只想提出我的解決方案。

<main> 
    [your content here] 
</main>

main { 
    background: red; 
    position: relative; 
    width: 1000px; 
    margin: 0 auto; 
} 

main::before { 
    background: blue; 
    content: ' '; 
    display: block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: -50vw; 
    right: -50vw; 
    z-index: -1; 
}

同樣應該以::元素後，如果需要正常工作。

基本上我正在做的是創建一個與父級相同高度的僞元素（但可以使它與負值更大），並根據視口寬度使用一種超大寬度的方式。它不是基於百分比，因爲百分比將與<main>元素相關。如果您需要支持較舊的瀏覽器，則可以使用百分比，但您需要爲自己計算一個數字。然後在父元素後面放置一層讓它保持可見。

有一個微小的缺點，但我認爲這實際上並不相關。使用這種方法，由於僞元素實際上比視口大，因此主體（或任何元素是您的元素的父元素）會獲得水平滾動條。你可以很容易地將overflow-x: hidden壓在身上，這不應該在居中佈局上造成任何問題。我會假設在一個居中的佈局中，應該永遠不會有實際需要水平溢出的點。

我認爲這也適用於浮動社交按鈕，如果你要使用它們（我沒有嘗試，但因爲我不是它的粉絲），因爲它們應該是相對於視口，而不是實際大小。

但我不知道這個解決方案是如何工作的，因爲我不知道最近渲染引擎是如何工作的。有一段時間，屏幕上的所有東西都被渲染出來（因此，臭名昭着的元素隱藏技術爲什麼能快速進入垃圾箱），但這些日子不應該成爲一個問題。

來源

2015-06-17 21:19:43 Tarulia

全寬度背景，沒有包裝

回答

相關問題