div 上的全宽背景颜色 [英] full width background color on a div
问题描述
我正在使用 1120 像素的 css 响应式响应框架,或者它可以在我需要时充当固定网格.
我在 1120px 容器 div 中有一个 div,我想在其上应用全宽背景色.
div 的背景颜色当然只在容器 div 内,我想让它填满 body 元素的整个宽度.
现在的问题是 div 是由短代码自动生成的,所以我无法创建外部 div 并将其设置为 100% 宽度.
这是短代码中的标记:
<div class="toggle"><div class="toggle_title toggle_active">LINE-UP</div><div class="toggle_content" style="display:block;">Lorem ipsum sat dolor amet</div>
和这个 css :
.toggle{ margin-bottom: 5px;清楚:两者;向左飘浮;位置:相对;宽度:100%;}.toggle .toggle_title {位置:相对;字体大小:112.5%;字体粗细:700;填充底部:15px;左边距:25px;文字装饰:无;}
这里是一个FIDDLE
现在,问题是此标记位于宽度为 1120 像素的容器 div 下.我正在考虑添加 .toggle .toggle_title position:absolute;例如,将最小宽度设置为 1480 像素,但随后一切都会中断.
我相信这是解决此类问题的更好方法.谁能给我一些关于如何使这项工作的提示?谢谢!
这是一种非常丑陋的方法.我发布这个是希望有人反对这个……但它有效.
这是一个小提琴http://jsfiddle.net/5mn22/8/>
将此添加到您的 CSS:
.toggle_title, .toggle_content {位置:相对;z-索引:2;}.toggle:before {内容:"";宽度:4000px;位置:绝对;高度:100%;背景颜色:红色;左:-50%;z-索引:1}
基本上,只需在 div 之前添加一个空内容,其宽度是预期屏幕分辨率的两倍,并将其定位到左侧 50% 以确保它拉伸整个距离.
你怎么看?
I'm using a 1120px css responsive framework responsive or it can act as a fixed grid whenever I need it.
I have a div inside the 1120px container div on which I want to apply a full width background color.
The background color of the div's is of course only inside the container div and I want to make it fill the full width of the body element.
Now the problem is that the div is generated automatically by a shortcode so I can not create an outer div and set it to 100% width.
Here is the markup from the shortcode:
<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>
and this 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;
}
and here is a FIDDLE
Now, the problem is that this markup is under a container div which has 1120px width. I was thinking to add on .toggle .toggle_title position:absolute; and set a min- width of 1480px for example but then everything will break.
I'm sure that is a better approach to this kind of issue. Can anyone give me some tips on how to make this work? Thank you!
Here's a really ugly way to do this. and I'm posting this with an expectation of someone downvoting this... but it works.
Here's a fiddle for it http://jsfiddle.net/5mn22/8/
Add this to your 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
}
Basically, just adding a null content before the div with a width double the size of expected screen resolution and position it to the left 50% to make sure it stretches the entire distance.
What do you think?
这篇关于div 上的全宽背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!