我一直在网上搜索一段时间来回答我的问题.我想将div背景颜色扩展到div(以及容器div)之外,以便达到浏览器的宽度.像这样http://vinnusal.is/ 上面的例子的问题是我使用填充/边距修复,它创建一个恼人的滚动到右边.我试过溢出没有任何运气.
我知道这可以通过100%的容器div和更小的嵌套div来完成.但是,如果可能的话,我想用另一种方式,因为这是我在流体站点的第一次射击,其中包括所有并发症.
在此先感谢Helgi
这是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;
}
}
Joh*_*lly 19
Kevin Powell 制作了一个有关如何执行此操作的 Youtube 视频 https://www.youtube.com/shorts/81pnuZFarRw
您所要做的就是向元素添加一个类并添加几行 CSS！您基本上是为整个背景设置一种颜色，然后根据元素对其进行裁剪。
CSS
.full-bleed {
box-shadow: 0 0 0 100vmax red;
clip-path: inset(0 -100vmax);
}
超文本标记语言
<div class="full-bleed"></div>
繁荣，你完成了！
Ste*_*ler 13
您可以使用:before具有绝对定位和负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>接受的答案似乎依赖于一个固定的高度，我发现这在响应式网站的这些日子里很少见，所以建立在 Stephen Ostermiller 给出的答案之上（谢谢！）以下代码对我有用，并围绕动态高度的对象：
.container{
background-color:#000;
padding-bottom:30px;
}
.stripe {
background-color:#000;
position: relative;
display: grid;
}
.stripe:before {
content:"";
background-color:#000;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
}