使用css擴展標題背景顏色到容器之外

我一直在網上搜索了一段時間，以便回答我的問題。我想擴展一個div背景顏色超出div（以及容器div），以便達到瀏覽器的寬度。像這樣http://vinnusal.is/ 上面的例子的問題是我正在使用填充/邊距修復，它會在右側創建一個惱人的滾動條。我沒有任何運氣嘗試溢出。使用css擴展標題背景顏色到容器之外

我知道這可以用一個100％的容器div和較小的嵌套div來完成。不過，如果可能的話，我想用另一種方式，因爲這是我在流體站點的第一槍，伴隨着所有的併發症。

由於提前，海爾吉

下面是HTML標記：

<body> 
<div class="gridContainer clearfix"> <!-- Container --> 

    <div class="gridContainer clearfix header" id="header"> <!--Header begins--> 
<img src="pics/hvitt.png" alt="VFI Logo" name="logo" id="logo"> 

<!-- Menu Horizontal --> 
... irrelevant markup for menu... 

    </div> 

    <!-- Header ends --> 
<div class="gridContainer clearfix submenu" id="submenu"> <!-- Submenu begins --> 
<h1><!-- InstanceBeginEditable name="title" -->Articles<!-- InstanceEndEditable --></h1>

而CSS：

/* Mobile Layout: 480px and below. */ 

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: 88.626%; 
    padding-left: 1.1869%; 
    padding-right: 1.1869%; 
} 
#LayoutDiv1 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#header { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#submenu { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#article { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#footer { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#leftColumn { 
    clear: none; 
    float: left; 
    margin-left: 2.6785%; 
    width: 100%; 
    display: block; 
} 
#rightColumn { 
    clear: none; 
    float: left; 
    margin-left: 2.6785%; 
    width: 100%; 
    display: block; 
} 
#header2 { 
    clear: none; 
    float: left; 
    margin-left: 2.6785%; 
    width: 100%; 
    display: block; 
} 

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ 

@media only screen and (min-width: 481px) { 
.gridContainer { 
    width: 91.4836%; 
    padding-left: 0.7581%; 
    padding-right: 0.7581%; 
} 
#LayoutDiv1 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#header { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#submenu { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#article { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#footer { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#leftColumn { 
    clear: none; 
    float: left; 
    margin-left: 1.6574%; 
    width: 100%; 
    display: block; 
} 
#rightColumn { 
    clear: none; 
    float: left; 
    margin-left: 1.6574%; 
    width: 100%; 
    display: block; 
} 
#header2 { 
    clear: none; 
    float: left; 
    margin-left: 1.6574%; 
    width: 100%; 
    display: block; 
} 
} 

/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ 

@media only screen and (min-width: 769px) { 
.gridContainer { 
    width: 78.9565%; 
    max-width: 1232px; 
    padding-left: 0.5217%; 
    padding-right: 0.5217%; 
    margin: auto; 
} 
#LayoutDiv1 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#header { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#submenu { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#article { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#footer { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
#leftColumn { 
    clear: none; 
    float: left; 
    margin-left: 1.3215%; 
    width: 100%; 
    display: block; 
} 
#rightColumn { 
    clear: none; 
    float: left; 
    margin-left: 1.3215%; 
    width: 100%; 
    display: block; 
} 
}

來源

2014-02-27 Helgi Guðmundsson

請包括關於這個問題您目前的CSS/HTML標記。沒有它，我們無法幫助你。另外，你提到的容器div可能是最好的方式去做這件事...... –

使用容器，這是正確的做事方式。 – Nit

謝謝你的回覆，我真的很感激。我會嘗試用容器來做到這一點。 –

可以使用:before僞元素絕對定位和n例如z-index將包含的div的背景色全部擴展到頁面的邊緣。

#container { 
 
    width: 100px; 
 
    margin: 0 auto; 
 
    background-color: #FFFFCC; 
 
} 
 
.stripe { 
 
    background-color:#CCFFFF; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.stripe:before { 
 
    content:""; 
 
    background-color:#CCFFFF; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 4000px; 
 
    left: -2000px; 
 
    z-index: -1; 
 
}

<div id="container"> 
 
    <div>one</div> 
 
    <div class="stripe">two</div> 
 
    <div>three</div> 
 
</div>

來源

2015-03-12 20:13:08

您可以設置'left：0'和'right :: 0'來確保頁面完全覆蓋而不會溢出 – maninalift

而不是爲''before'元素的'height'和'width'唱出大的值。背景是絕對相對於'.stripe'，這樣就行不通了。 'left：0'和'right：0'不是頁面的右側和左側，它們是'.stripe'的左側和右側。 –

除了使用非常大的數字之外，還可以使用CSS3單位將視口寬度設置爲寬度：'width：200vw;左：-100vw;'這將在現代瀏覽器中工作，除了IE 8和更早版本。 –

使用css擴展標題背景顏色到容器之外

回答

相關問題