div上的全宽背景颜色答案

【问题标题】：full width background color on a divdiv上的全宽背景颜色
【发布时间】：2013-04-01 11:00:37
【问题描述】：

我正在使用 1120 像素的 css 响应式框架响应式，或者它可以在我需要时充当固定网格。

我在 1120px 容器 div 中有一个 div，我想在其上应用全宽背景色。

div 的背景色当然只在容器 div 内，我想让它填满 body 元素的整个宽度。

现在的问题是 div 是由简码自动生成的，所以我无法创建外部 div 并将其设置为 100% 宽度。

这是短代码中的标记：

<div class="toggle-default">
    <div class="toggle">
<div class="toggle_title toggle_active">LINE-UP</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div>

</div>
    </div>

还有这个css：

.toggle{ margin-bottom: 5px; 
clear: both; float: left; 
position: relative;  
width: 100%;                
}
.toggle .toggle_title {
position: relative;
font-size: 112.5%;
font-weight: 700;
padding-bottom: 15px;
padding-left: 25px;
text-decoration: none;

}

这是FIDDLE

现在，问题在于这个标记位于一个宽度为 1120 像素的容器 div 下。我正在考虑添加 .toggle .toggle_title position:absolute;例如，将最小宽度设置为 1480 像素，但随后一切都会中断。

我确信这是解决此类问题的更好方法。谁能给我一些关于如何完成这项工作的提示？谢谢！

【问题讨论】：

使用jsfiddle.net 实际展示正在发生的事情将帮助您获得更多答案。
您不想将背景颜色设置为body 元素吗？
你想给哪个 div 应用背景色？
@Diodeus 我不想占用他们元素的全宽，我想占用 body 元素的全宽；
@pzin 我不能把它放在身体上，因为我想在每个 div 上有不同的背景颜色

标签： html css responsive-design fullscreen background-color

【解决方案1】：

这是一种非常丑陋的方法。我发布这个是希望有人反对这个......但它有效。

这是一个小提琴http://jsfiddle.net/5mn22/8/

将此添加到您的 CSS：

.toggle_title, .toggle_content {
    position:relative;
    z-index:2;
}

.toggle:before {
    content:"";  
    width:4000px;
    position:absolute;
    height:100%;
    background-color:red;
    left:-50%;
    z-index:1
}

基本上，只需在 div 之前添加一个空内容，其宽度是预期屏幕分辨率大小的两倍，并将其定位到左侧 50% 以确保它延伸整个距离。

你怎么看？

【讨论】：

在设计元素样式时我不关心语义，这是可行的，但它适用于所有主要浏览器吗？
:before 和 :after 使用 CSS2+ w3schools.com/cssref/css_selectors.asp 和 z-index 处理所有主流浏览器。你不能 z-index:inherit with ie7 - w3schools.com/cssref/pr_pos_z-index.asp
谢谢！现在有个小问题：当我使用 :nth-child() 属性为元素设置不同的背景时，第一个切换将具有红色背景，第二个切换将具有蓝色，依此类推...
切换是有条件的，所以你必须使用像 jQuery 这样的东西 - 在查看任何 CSS2 及以下内容的浏览器上也不支持 :nth-child() 。您必须为每个元素赋予它自己的 ID 或 Class，并在 CSS 中为这些类着色

【解决方案2】：

尝试考虑不同的更改 css 参数，而不是使用 background-color。我用:box-shadow参数测试过：

.toggle {
      box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
      -webkit-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
      -moz-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42;
}

看一下实例（蓝色行）^http://kreditka.testovi-site.pw

问候，最大

【讨论】：