從父容器應用於元素的強制寬度中移除元素

Question

如何從父容器應用於元素的強制寬度中移除元素？

<div id="container"> <!-- This div is forcing the site to be 960px width. Also It holds all the content that the site has --> 
    <div id="extra"> <!-- I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border --> 
    <img src="orange.jpg"> 
    </div> 
</div> 

我無法編輯原始網站的CSS。這就是爲什麼我無法修改包含.container的代碼的比例。我只能將CSS添加到網站。

我一直在嘗試使用不同的位置命令，但他們似乎沒有帶來所需的解決方案。我無法從左到右獲取圖像範圍。

我可以使用哪些解決方案來解決這個問題。我只能使用CSS。我正在通過SiteOrigin插件使用WordPress和PageBuilder。

Answer 1

根據您的.container div及其父元素在定位和溢出時的具體情況，此處爲樣本 。 您可以用來支持舊版瀏覽器的示例。對於較新的，請檢查「重複」問題的答案CSS - how to overflow from div to full width of screen。

待辦事項：添加您的圖像，因爲我刪除它以顯示div的唯一。

第一 這使用position: absolute （使用此如果定位到舊的瀏覽器） 和將工作，如果沒有父元件具有像position: relative/position: absolute定位或具有比視口與overflow: hidden結合的小的寬度。

添加了.wrapextra以使絕對定位div 流與內容。

編輯

如果在.extra DIV之後應該出現的內容，你需要設置一個固定的高度上.wrapextra相匹配的.extra DIV正常「推」內容下的內容高度。

如果沒有固定的高度可以設置需要一個小腳本鈣質，動態設置它，這裏是一個演示：Fiddle Demo

html, body {margin: 0} 
 
#container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    background-color: #ddd; 
 
} 
 
#wrapextra { 
 
    background-color: #f99; 
 
} 
 
#extra { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    min-width: 960px; 
 
    height: auto; 
 
    background-color: #ff9; 
 
}

<div id="container"> 
 
    This div is forcing the site to be 960px width.<br/> 
 
    Also It holds all the content that the site has 
 
    <div id="wrapextra"> 
 
    <div id="extra"> 
 
     I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border 
 
    </div> 
 
    </div> 
 
</div>

第二種是使用「視窗單位「（仍然相當不錯的瀏覽器支持，IE9及以上），並且如果沒有父元素的寬度小於與 overflow: hidden相結合的視口寬度，它將工作。

此外，如果任何父母有像position: absolute定位這也可能使此示例不起作用。

當視口的寬度大於960像素時，添加了@media查詢以使額外的div 伸展。

html, body {margin: 0} 
 
#container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    background-color: #ddd; 
 
} 
 
#extra { 
 
    background-color: #ff9; 
 
} 
 
@media (min-width: 960px) { 
 
    #extra { 
 
    position: relative; 
 
    left: 50%; 
 
    margin-left: -50vw; 
 
    width: 100vw; 
 
    } 
 
}

<div id="container"> 
 
    This div is forcing the site to be 960px width.<br/> 
 
    Also It holds all the content that the site has 
 
    <div id="extra"> 
 
     I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border 
 
    </div> 
 
</div>

Answer 2

您需要將html設置爲不同的方式才能使用。你需要像下面的代碼。這將有效地將你的容器分成兩個，允許你在它們之間有全寬div。

<div class="container"> 
    content here...... 
</div> 

<div id="extra"> 
    <img src="orange.jpg"> 
</div> 

<div class="container"> 
    more content here...... 
</div> 

只是適用width: 100%;到#extra得到它全寬

正如指出的@LGSon我有重複的ID。如果您將它們換爲課程，並將樣式添加到.container以使它與#container設置相同，則此功能適用於您。