Question

我正在使用1120px 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

现在，问题是这个标记位于容器div下，其宽度为1120px。我想添加 .toggle .toggle_title 位置：绝对;并设置最小宽度为1480px，但随后一切都会中断。

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

Answer 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之前添加一个null内容，其宽度是预期屏幕分辨率的两倍，并将其放置在左边50％，以确保它延伸整个距离。

您怎么看？

Answer 2

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

测试了它

.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

此致最大

div上的全宽背景颜色

2 个答案: