CSS 100vw 导致滚动条显示，不幸的是不能使用 100%

Question

你好 SO 社区！

我知道这个问题有多种变体，但是似乎没有人像我一样尝试做一些事情。使用 width: 100% 无法轻松修复我的场景。那么让我们开始这个派对吧！

从对象边界准备好 Chris Coyier's article on hacking up CSS Triangles 后，我部分地理解了这个想法。

IMPORTANT Let me first state that I understand that in most cases, you would use width:100%, however, I am working with borders and you can't use percentages with borders :(

I also am really really really trying to avoid using javascript for this solution. Please refrain from answering with javascript solutions as I already know how to do this w/ javascript. I also do not like the idea of setting the body max-width to 100%. I do not want to limit any overflow constraints for this project. Thank you kindly. :)

HTML

<section class="section-blue">[Text Goes Here]</section>
<div class="divider-blue-red"></div>
<section class="section-red">[Text Goes Here]</section>
<div class="divider-red-green"></div>
<section class="section-green">[Text Goes Here]</section>

CSS

    [class*='section-']
    {
        min-height: 100vh;
        padding: 20px;
    }

    .section-blue {background-color: blue;}
    .section-red {background-color: red;}
    .section-green {background-color: green;}

    [class*='divider-']
    {
        display: block;
        width: 0;
        height: 0;
        border-top: 25vh solid transparent;
        border-bottom: 0vh solid transparent;
        border-left: 0vw solid transparent;
        border-right: 100vw solid transparent;
    }
    .divider-blue-red
    {
        border-top-color: blue;
        border-right-color: red;
    }
    .divider-red-green
    {
        border-top-color: red;
        border-right-color: green;
    }

现场演示

Click Here To View Live Demo（我无法使用 codepen，因为我使用的是 vw 和 vh）

目标

有 .divider-blue-red && .divider-red-green 元素占视图的 100% window 不包括滚动条
不使用javascript（纯CSS解决方案）
未将正文设置为“最大宽度:100%”
采用随设备宽度和高度滚动的炫酷流体设计！ :)

Answer 1

阅读这篇文章可能会有帮助

当我给它一个 -1 em 的边距时，它会变宽。可以到这里再改值，零，-1 em，零，-1 em。问题是，我需要找到确切的值，因为如果我把这个设为 -2 em，突然间，我会在底部看到一个滚动条，我可以左右滚动，因为现在容器是大于视口。那根本行不通。现在我确定你此时正在想，“好吧，这并不难。

"All you have to do is go to the main that has the margin, "这里您看到边距是 1.4 em，"and then just apply a 1.4 em to the entry meta." 问题是，这是行不通的。你看，如果我在这里说 -1.4 ems，它看起来像是一直延伸，但如果你仔细观察，你会发现左右两侧有一条轻微的白线。那是因为尽管主页面的边距是 1.4 em，但在入口元中实际上是 1.4 左右的 em，因为我们使用 em 大小来调整内容的大小，并且您注意到入口元的字体大小为 95%。

这意味着要获得 em 大小，我必须弄清楚内部容器和外部容器之间的区别。因此，让我用一个侧边栏向您解释如何计算 em 大小。我们需要两个元素才能做到这一点。首先，我将转到 main 并找出字体大小。请看这里，字体大小为 14.4 像素。记住这一点。然后我们将转到入口元并做同样的事情。这里的字体大小是多少？ 13.68 所以我们有 14.4 和 13.68。

侧边栏介绍如何计算 em 值。我们有两个容器。父容器的字体大小为1em，在浏览器中计算出的字体大小为14.4像素。嵌套容器的字体大小为95%，这里计算出的字体大小为13.68。 13.68 是 14.4 的 95%。父容器的边距为 1.4 em，在浏览器中，这相当于 25.902 像素。

现在我需要弄清楚我可以在嵌套容器中设置什么 em 值以获得相同的 25.902 像素。为此，我将使用两个公式。首先，我将获取父字体大小并将其除以嵌套字体大小。这给了我两者之间的相对差异。当你做这个数学时，你可能会想出一个非常奇怪的数字，比如 1.052631 da da da da da da。现在我们需要保存这个数字并将其添加到一个新公式中，该公式采用父 em 大小，因此在我们的例子中为 1.4，并将其乘以相对差值，即 1.05

这为我们提供了我们需要定位的嵌套 em 大小。在我们的示例中，所有这些数学运算的结果为我们提供了 1.47368421052632，这就是我们要使用的值。在上一部电影之间，我对我们的 CSS 做了一些细微的改动，所以如果你想在这一点上继续，你需要获取 06-05 的练习文件。在 style.css 中，您会在这里看到，在条目元规则下，我创建了两个新属性。

首先，我有边距值，将顶部和底部设置为零，将左侧和右侧设置为 -1.47368 da da da。那是我们刚刚得到的数字。然后我在填充中做了同样的事情，给盒子一个相同值的填充。这样做是为了如果此框中的内容足够向左或向右跨越，它不会意外触及视口的边缘。正如您在浏览器中看到的那样，通过添加这两个属性，我们的内容现在跨越了视口的整个宽度。但是，如果您现在开始放大视口，您会注意到在某个时刻，您会遇到断点。

我已经在此处说明了该断点。我们在 30 em 处有一个断点，在这里我必须更改边距值，因为在那个断点处，内容周围的边距从 1.4 切换到 1.8。结果，我们现在得到 -1.8947 等等。这样就解决了较小的屏幕。但是这个内容漂浮在中间的大屏幕呢？那么在这里我们必须做一些完全不同的事情，这就是我注释掉这一部分的原因，这样我就可以充分解释发生了什么。

我先把评论拿走，然后我们再看看这个媒体查询。当屏幕宽度超过 57 em 时，我们将锁定主要内容的宽度并将其浮动在中心。为了让入口元跨越整个宽度，我们现在必须计算出实际视口的宽度，然后根据它定位入口元。我在这里所做的是使用 CSS3 中称为 vw 或视口宽度的新测量单位。所以我设置如下。如果浏览器支持 vw 单位，则 entry meta 的宽度将与视口一样宽。

然后我必须减去我们的内容的宽度，所以从视口宽度减去 52.2 em，但由于数学原因我必须以倒退的方式执行此操作。所以这里我们有 -100 视口宽度加上 52.2。这给了我们所有的视口宽度减去主要内容。然后我将其除以二，并将内容向左移动该值。最终结果，您会在我重新加载页面时看到。现在内容横跨整个宽度，但我知道你会说，"But I see white on the side here." 这实际上是因为此移动视图的预览。

如果我关闭浏览器工具，您会看到它实际上跨越了整个宽度。然而，这个数学并不精确，因此，我现在可以稍微向左滚动。这是一个不幸的现实，因为当您使用 vw 属性时，会计算视口宽度，包括此处右侧的滚动条。现在，滚动条悬停在内容上方，这意味着我的内容比您看到的要宽。这在浏览器之间有所不同，这就是我们无法计算滚动条的原因，所以我要作弊来解决这个问题。

我们这里作弊的方式是抓取内容区域，所以整个区域，然后说内容区域，我要挡住overflow-x，也就是水平溢出，设置一下就可以了隐藏。这样，因为这个盒子而发生的溢出就被简单地隐藏了，你看不到它。所以现在感谢一些 CSS 炼金术，我们现在有一个元内容区域，无论屏幕大小如何，它都有一个全角背景。

Answer 2

一个可能的解决方案是改变创建三角形的方式。使用渐变图像代替边框技巧

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  min-height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 18px;
}
[class*='section-'] {
  min-height: 100vh;
  padding: 20px;
}
.section-blue {
  background-color: blue;
}
.section-red {
  background-color: red;
}
.section-green {
  background-color: green;
}
[class*='divider-'] {
  display: block;
  height: 25vh;
  width: 100%;
}
.divider-blue-red {
  background: linear-gradient(to right bottom, blue 50%, red 50%);
}
.divider-red-green {
  background: linear-gradient(to right bottom, red 50%, green 50%);
}

<section class="section-blue">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>
<div class="divider-blue-red"></div>
<section class="section-red">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>
<div class="divider-red-green"></div>
<section class="section-green">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>

在此解决方案中，通常两种颜色之间的分隔线不像您当前的解决方案那样平滑

另一种解决方法是使用 calc。由于滚动条宽度存在差异，因此设置一个高于预期的值，并使用阴影填充（可能的）空白 space.

在滚动条较小的浏览器中，右侧会有少量水平分隔。但我认为这不是很明显

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  min-height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 18px;
}
[class*='section-'] {
  min-height: 100vh;
  padding: 20px;
}
.section-blue {
  background-color: blue;
}
.section-red {
  background-color: red;
}
.section-green {
  background-color: green;
}
  [class*='divider-']
  {
   display: block;
   width: 0;
   height: 0;
   border-top: 25vh solid transparent;
   border-bottom: 0vh solid transparent;
   border-left: 0vw solid transparent;
   border-right: calc(100vw - 20px) solid transparent;
  }

  .divider-blue-red
  {
   border-top-color: blue;
   border-right-color: red;
          box-shadow: 20px 0px red;
  }

  .divider-red-green
  {
   border-top-color: red;
   border-right-color: green;
          box-shadow: 20px 0px green;
  }

<section class="section-blue">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>
<div class="divider-blue-red"></div>
<section class="section-red">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>
<div class="divider-red-green"></div>
<section class="section-green">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate, nibh vitae dignissim euismod, ex elit consequat est, vitae placerat magna nunc sed lectus. Suspendisse vehicula elementum nulla id dictum. Nulla a efficitur erat. Proin consequat
  justo sit amet ultricies vehicula. Proin facilisis metus a velit volutpat, sit amet rutrum quam commodo. Ut quam justo, congue vel elit commodo, molestie scelerisque nisi. Etiam auctor lacinia pretium. Nulla vel dui et diam dictum dignissim non vitae
  metus. Vivamus arcu arcu, finibus vitae ante nec, porta aliquam nunc. Vivamus pellentesque est in posuere mollis. Aenean non lectus id nunc ultrices gravida.
</section>

CSS 100vw 导致滚动条显示，不幸的是不能使用 100%

CSS 100vw causing scrollbar to show, cant use 100% unfortunately

css

css-hack

liquid-layout

border-box

fluid-layout