技術使用大背景DIV在不影響車身寬度

請參考本example有如下解釋：技術使用大背景DIV在不影響車身寬度

我有超寬，居中背景圖像的網頁。我希望頁面的主體寬度摺疊爲內容，並忽略包含背景的div。在給定的例子中，我有一個簡單的例子，我如何做到這一點：一個bg外部div建立適當的頁面寬度（200px寬），一個bg內部div（400px寬）包含超寬圖像。然後，我使用溢出：可見和負邊距嘗試在不增加頁面寬度的情況下居中更寬的bg-inner。但是，如示例所示，當瀏覽器窗口小於400像素而不是200像素時，會出現水平滾動條。爲什麼會發生？有更好的方法嗎？

Thanks-

編輯：

這裏有一個duplicate我最終找到，有一個類似但略有不同的解決方案。我喜歡wdm給出的答案，儘管如此。

來源

2011-04-16 Yarin

「我要在頁面的車身寬度崩潰的內容，而忽略包含背景股利」你能澄清一下嗎？ – ninjagecko 2011-04-16 21:42:12

我希望我的頁面寬度被識別爲200px，這樣只有瀏覽器比這個小時纔會顯示h滾動條。即使我正在處理寬度爲400px的背景圖像，我也希望這會發生。（尺寸與示例有關，實際上，我正在處理一個960像素寬的頁面，其背景圖像寬度爲1400像素，該圖像居中，除非瀏覽器展開，否則其邊框通常會截斷）。 – Yarin 2011-04-16 21:55:54

重複發帖：Why do negative margins affect my page width?

然而，這一個更好地解釋你正在努力完成的事情。

這很簡單...

演示：http://jsfiddle.net/wdm954/L3U9c/

<div id="bg"> 
    <div id="content"> 
     Here is my content. 
    </div> 
</div> 


#bg { 
    background-color: red; 
    background-position: top center; /* for images */ 
} 
#content { 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    left: 0px; 
    top: 0px; 
    width: 200px; 
    background-color: #ccc; 
}

來源

2011-04-17 00:58:23 wdm

@ wdm-你是一個學者和一個紳士 - 這個優雅的解決方案完美地工作 - 謝謝 – Yarin 2011-04-17 13:35:16

@wdm如果瀏覽器寬度小於200px，背景圖像保持居中，即使內容的左側保持與視圖窗格的左側齊平。我有類似的問題，但我需要背景圖像保持鎖定到內容div的位置，但不顯示滾動條在bg div比視圖窗格更寬。 – dqhendricks 2012-02-27 03:59:10

您可以添加

body { 
    overflow-x: hidden; 
}

來源

2011-04-16 22:02:35

溢出已隱藏 - 請參閱示例 – Yarin 2011-04-16 22:23:19

我沒有在示例中看到它。我在添加我發佈的代碼之前和之後嘗試了一下，注意到滾動條已經消失。 – 2011-04-16 22:25:38

@ Fareesh-我的不好，你是對的它沒有在前面的例子中，但仍然不適合我的解決方案 - overflow：hidden會隱藏溢出 - 我想顯示溢出，但忽略它的方面佈局。 – Yarin 2011-04-17 00:17:33

我認爲，所有你需要知道你在做什麼是三線的CSS：

body { 
    background-image:url('myurl.jpg'); 
    background-position:center; 
    background-size:cover; 
}

正如你可以看到：

<body> 
    <p>This is my document. Nothing else necessary</p> 
    <!-- any other content you desire --> 
</body>

來源

2011-04-16 22:04:40 ninjagecko

@ ninjagecko-謝謝，但這不適用於我的情況 - 固定寬度的背景與Y - 重複 - 試圖找出如何忽略實例中的實際div寬度... – Yarin 2011-04-16 22:23:03

技術使用大背景DIV在不影響車身寬度

回答

相關問題