css网页标题背景栏颜色,使用css扩展标题背景颜色到容器之外

我一直在网上搜索了一段时间，以便回答我的问题。我想扩展一个div背景颜色超出div(以及容器div)，以便达到浏览器的宽度。像这样http://vinnusal.is/ 上面的例子的问题是我正在使用填充/边距修复，它会在右侧创建一个恼人的滚动条。我没有任何运气尝试溢出。使用css扩展标题背景颜色到容器之外

我知道这可以用一个100％的容器div和较小的嵌套div来完成。不过，如果可能的话，我想用另一种方式，因为这是我在流体站点的第一枪，伴随着所有的并发症。

由于提前， 海尔吉

下面是HTML标记：

... irrelevant markup for menu...

Articles

而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;

}

}

+0

请包括关于这个问题您目前的CSS/HTML标记。没有它，我们无法帮助你。另外，你提到的容器div可能是最好的方式去做这件事...... –

+0

使用容器，这是正确的做事方式。 –

+0

谢谢你的回复，我真的很感激。我会尝试用容器来做到这一点。 –