CSS 带背景色的全角 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20239675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full-width div with background color
提问by Stefaan
On this page: http://www.tff-bvba.be, I need the grey background behind the picture to be full-width on all resolutions, and the text and picture to be centered on the screen. Everything works ok, except the fact that the background continues to the right, off the screen (scroll to the right, you'll see).
在这个页面上：http: //www.tff-bvba.be，我需要图片后面的灰色背景在所有分辨率下都是全角的，并且文本和图片要在屏幕上居中。一切正常，除了背景继续向右，离开屏幕（向右滚动，你会看到）。
I spent 2 hours looking for a solution but found none that worked for me... This is my code:
我花了 2 个小时寻找解决方案，但没有找到对我有用的...这是我的代码：
HTML:
HTML：
<div class="wide">
<div class="odd">
<div class="homeimage"><img src="http://www.tff-bvba.be/wp-content/uploads/2013/11/hugo- home.png" alt="hugo-home" class="alignright size-full wp-image-1283" /></div>
<div class="hometext"><h1>Slaag in je materiaalinnovatie</h1>
Plan je een complexe innovatie waarbij de <b>combinatie en vorm van materialen</b> essentieel is? Missen je medewerkers <i>knowhow</i> of heb je tijdelijk versterking nodig?<br /><br />TFF maximaliseert de slaagkans van je project door:
<ul>
<li><b>35 jaar ervaring</b> in slimme materiaalcombinaties</li>
<li>maximaal <b>draagvlak </b>bij je medewerkers</li>
<li>bewezen expertise in<b> technieken en processen</b></li>
</ul>
<a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</div>
</div>
</div>
CSS:
CSS：
.wide {
text-align:left;
font-weight:bold;
background:#ebebeb;
margin-left:-100%;
margin-right:-100%;
margin-bottom: 60px;
height: 465px;
}
.odd {
background-color:#ebebeb;
clear:both;
width:900px;
padding:40px 0 27px 0;
margin: 0 auto;
}
.hometext {
float: left;
width: 500px;
}
.homeimage {
margin-top: 0px;
float: right;
}
Thanks for your help, much appreciated! Stefaan
感谢您的帮助，非常感谢！斯特凡
采纳答案by Paulo Roberto Rosa
I've changed your html and css using firebug in real-time and it works look:
我已经使用 firebug 实时更改了您的 html 和 css，效果如下：
Your problem is the html, your .widediv are placed on the wrong place, i've placed it correctly, and changed a little the CSS, use these html and css:
您的问题是 html，您的.widediv 放置在错误的位置，我已经正确放置了它，并更改了一点CSS，使用这些 html 和 css：
HTML:
HTML：
<div id="bdywrapper2">
<div class="wide">
<div class="odd">
<div class="homeimage"><img src="http://www.tff-bvba.be/wp-content/uploads/2013/11/hugo-home.png" alt="hugo-home" class="alignright size-full wp-image-1283"></div>
<div class="hometext">
<h1>Slaag in je materiaalinnovatie</h1>
<p>Plan je een complexe innovatie waarbij de <b>combinatie en vorm van materialen</b> essentieel is? Missen je medewerkers <i>knowhow</i> of heb je tijdelijk versterking nodig?</p>
<p>TFF maximaliseert de slaagkans van je project door:</p>
<ul>
<li><b>35 jaar ervaring</b> in slimme materiaalcombinaties</li>
<li>maximaal <b>draagvlak </b>bij je medewerkers</li>
<li>bewezen expertise in<b> technieken en processen</b></li>
</ul>
<p><a class="bttn" title="Slimme materiaalinnovatie" href="http://www.tff-bvba.be/materiaalinnovatie/">Ontdek ons aanbod</a>
</p></div>
</div>
</div>
<!-- Start of main -->
<div class="main">
<div class="clear"></div>
<!-- Start of dynamic loop -->
<div class="dynoloop">
<!-- ******************************************************************** This is the start of blog loop ********************************************************************-->
<!-- Start of one half first -->
<div class="blog_one_half_first">
<!-- Start of slider wrapper -->
<section class="slider_wrapper">
<!-- Start of slider -->
<section style="overflow: hidden;" class="slider">
<ul style="width: 800%; margin-left: -412px;" class="slides"><li style="width: 412px; float: left; display: block;" class="clone">
<h3><a href="http://www.tff-bvba.be/testartikel-2/">Een tevreden klant vertelt…</a></h3>
<br>
<p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.” – Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
</li>
<li style="width: 412px; float: left; display: block;">
<h3><a href="http://www.tff-bvba.be/testartikel-1/">Daarom werk je met ons</a></h3>
<br>
<h2><a href="http://www.tff-bvba.be/waarom-wij/">Daarom werk je met ons</a></h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
<a href="http://www.tff-bvba.be/waarom-wij/" title="Waarom wij?" class="bttn-left">Overtuig jezelf</a></p>
</li>
<li style="width: 412px; float: left; display: block;">
<h3><a href="http://www.tff-bvba.be/testartikel-2/">Een tevreden klant vertelt…</a></h3>
<br>
<p>“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.” – Manfred Jordan, CEO Mayser/M.Pore</p>
<p>Meer klanten</p>
</li>
<li style="width: 412px; float: left; display: block;" class="clone">
<h3><a href="http://www.tff-bvba.be/testartikel-1/">Daarom werk je met ons</a></h3>
<br>
<h2><a href="http://www.tff-bvba.be/waarom-wij/">Daarom werk je met ons</a></h2>
<p>1. Unieke ervaring: <b>materiaalinnovatie + bedrijfsvoering</b></p>
<p>
2. <b>Snelle terugverdientijd</b> door interim dividenden</p>
<p>3. Mensgerichte aanpak: <b>draagvlak bij stakeholders</b><br>
<a href="http://www.tff-bvba.be/waarom-wij/" title="Waarom wij?" class="bttn-left">Overtuig jezelf</a></p>
</li></ul>
<ol class="flex-control-nav"><li><a class="active">1</a></li><li><a>2</a></li></ol><ul class="flex-direction-nav"><li><a class="prev" href="#">Prev</a></li><li><a class="next" href="#">Next</a></li></ul></section><!-- End of slider -->
<!-- Start of clear fix --><div class="clear"></div>
</section><!-- End of slider wrapper -->
</div><!-- End of one half first -->
<!-- Start of one half -->
<div class="blog_one_half">
<!-- Start of slider wrapper -->
<section class="slider_wrapper">
<!-- Start of slider -->
<section class="slider">
<ul class="slides">
<li style="display: list-item;">
<h3><a href="http://www.tff-bvba.be/testartikel-3/">Een tevreden klant vertelt…</a></h3>
<br>
<h2><a href="http://www.tff-bvba.be/onze-referenties/">Een tevreden klant vertelt…</a></h2>
<p>
“Mayser/M.Pore ontwikkelt en produceert metaalschuimen voor toepassingen zoals LED-koeling. TFF beschikt over jarenlange ervaring op dit domein. Ze assisteren ons dagelijks op vlak van kwaliteit, productiviteit en creativiteit.” – Manfred Jordan, CEO Mayser/M.Pore<br>
<a href="http://www.tff-bvba.be/onze-referenties/" title="Onze referenties" class="bttn-right">Meer klanten</a></p>
</li>
</ul>
</section><!-- End of slider -->
<!-- Start of clear fix --><div class="clear"></div>
</section><!-- End of slider wrapper -->
</div><!-- End of one half -->
<!-- ******************************************************************** This is the emd of blog loop ********************************************************************-->
<div class="clear"></div>
</div><!-- End of dynamic loop -->
</div><!-- End of main -->
<!-- Start of accent bottom -->
<div class="accentbottom">
<!-- Start of accent top -->
<div class="accenttop">
</div><!-- End of accent top -->
</div><!-- End of accent bottom -->
</div>
CSS:
CSS：
.wide {
text-align:left;
font-weight:bold;
background:#ebebeb;
margin-bottom: 60px;
width: 100%;
height: 465px;
}
回答by Kishori
Try Below CSS
试试下面 CSS
.main {
margin: 0 auto;
padding-bottom: 60px;
width: 100%;
}
.wide {
background-color: #EBEBEB;
font-weight: bold;
height: 465px;
text-align: left;
}
回答by NoobEditor
Simple changes will do the trick for you
简单的更改将为您解决问题
remove
margin-left:-100%;
margin-right:-100%;from class .wideand give oddclass 100% widthinstaed of 900px
margin-left:-100%;
margin-right:-100%;从班级中删除
.wide并给odd班级100% width设置900px
Your CSS at present is stretching the bg....!!
你的 CSS 目前正在拉伸 bg....!!
EDIT :
编辑 ：
edit after the comment : use a wrapperclass to wrap your entire text and images, put oddto width:100%, this will ensure better compatibility and ease of CSS flow
编辑注释后：用一个wrapper类来包装整个文本和图像，把odd到width:100%，这将确保更好的兼容性和易用性CSS流
HTML
HTML
<div class="odd">
<div class="wrapper">
<div class="homeimage">
<img src="" class="alignright size-full wp-image-1283" />
</div>
<div class="hometext">
</div>
</div> <!-- //wrapper -->
</div><!-- //odd-->
CSS
CSS
.wrapper{width:90%;margin:0 auto} // this will center the div and not take whole width at the same time
