如何扩展部分宽度:使用 css 100% [英] How to extend section width: 100% using css

查看:33
本文介绍了如何扩展部分宽度:使用 css 100%的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在 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屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆