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

Helgi Guðmundsson

5

css

我一直在网上搜索一段时间来回答我的问题.我想将div背景颜色扩展到div(以及容器div)之外,以便达到浏览器的宽度.像这样http://vinnusal.is/

上面的例子的问题是我使用填充/边距修复,它创建一个恼人的滚动到右边.我试过溢出没有任何运气.

我知道这可以通过100%的容器div和更小的嵌套div来完成.但是,如果可能的话,我想用另一种方式,因为这是我在流体站点的第一次射击,其中包括所有并发症.

在此先感谢Helgi

这是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;

}

}