如何扩展部分宽度:使用 css 100% [英] How to extend section width: 100% using css
问题描述
我在 width: 1180px;
里面有一个部分我想扩展这个绿色 div 我想让宽度:100% 我已经尝试使用 vw
但没有得到但一些额外的空间即将到来.任何人都可以建议我吗?有没有其他方法可以使用 CSS.
.wrapper {宽度:100%;位置:相对;背景:#ccc;}.内{宽度:1180px;边距:0 自动;背景:粉色;}.box1 {高度:50px;背景:红色;}.box2 {高度:50px;背景:绿色;margin-left: calc(-100vw/2 + 100%/2);margin-right: calc(-100vw/2 + 100%/2);宽度:100vw;}
<div class="inner"><div class="box1"></div><div class="box2"></div>
您可以使用负边距 - 这种方法的唯一问题是,如果页面获得垂直滚动,这将添加水平滚动,因为 100vw 不会考虑到垂直滚动导致的 20px:
body {边距:0;}.包装{宽度:100%;位置:相对;背景:#ccc;}.内{宽度:1180px;边距:0 自动;背景:粉色;}.box1 {高度:50px;背景:红色;}.box2 {高度:50px;背景:绿色;宽度:100%;}@media 屏幕和 (min-width:1180px) {.box2 {边距:0 calc(((100vw - 1180px)/2) * -1);宽度:自动;}}
<div class="inner"><div class="box1"></div><div class="box2"></div>
正如我在评论中所说,最好将绿色 div 移到包装器外
I have a section inside width: 1180px;
i want to extend this green color div I want to make width: 100% I have tried using vw
but not getting but some extra space is coming. can anyone suggest me? Is there any other way to do using CSS.
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
margin-left: calc(-100vw/2 + 100%/2);
margin-right: calc(-100vw/2 + 100%/2);
width: 100vw;
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
You could use negative margin - the only problem with this approach is that if the page gets a vertical scroll, this will add a horizontal scroll as 100vw doesn't take into account the 20px caused by the vertical scroll:
body {
margin: 0;
}
.wrapper {
width: 100%;
position: relative;
background: #ccc;
}
.inner {
width: 1180px;
margin: 0 auto;
background: pink;
}
.box1 {
height: 50px;
background: red;
}
.box2 {
height: 50px;
background: green;
width: 100%;
}
@media screen and (min-width:1180px) {
.box2 {
margin: 0 calc(((100vw - 1180px) / 2) * -1);
width: auto;
}
}
<div class="wrapper">
<div class="inner">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
As I say in my comments, it would be better to just move the green div outside your wrapper
这篇关于如何扩展部分宽度:使用 css 100%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!