html - div 上的全 Angular 背景颜色

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

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

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

Answer 1

这是一种非常丑陋的方法。我发布此内容的目的是希望有人对此投反对票……但它确实有效。

这是一个 fiddle 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%，以确保它拉伸(stretch)整个距离。

你觉得怎么样？