Question

你好社区！

我知道这个问题存在各种变化，但似乎没有人像我一样尝试做一些QUITE。我的方案无法使用width: 100%轻松修复。所以让我们开始这个派对吧！

我从对象边框准备好Chris Coyier's article on hacking up CSS Triangles之后部分得到了这个想法。

重要让我首先说明我理解在大多数情况下，您会使用width:100%，但是，我正在使用 border < / strong>并且您无法使用带边框的百分比:(

我也真的非常想避免使用javascript来解决这个问题。请不要回答javascript解决方案，因为我已经知道如何使用javascript进行此操作。我也不喜欢将body max-width设置为100％的想法。我不想限制此项目的任何溢出约束。非常感谢你。：）

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＆amp;＆amp; .divider-red-green个元素扩展到视图窗口的100％，不包括滚动条

不使用javascript（纯CSS解决方案）

未将主体设置为＆＃39; max-width：100％`

采用冷却液设计，随设备宽度和高度滚动！ :)

Answer 1

一个可行的解决方案是改变你创建三角形的方式。而不是边界技巧，使用渐变图像

＆＃13;

*,
*: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%);
}

＆＃13;

<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>

＆＃13;

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

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

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

＆＃13;

*,
*: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;
		}

＆＃13;

<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>

＆＃13;

Answer 2

阅读此内容可能有所帮助

当我给它一个-1 em的边距时，它变得更宽。可以进入这里并再次更改值，零，-1 em，零，-1 em。问题是，我需要找到确切的值，因为如果我做这个-2 em，突然间，我在底部得到一个滚动条，我可以左右滚动，因为现在容器比视口大。这根本不起作用。现在我确定你在思考这个问题，＆＃34;嗯，这不是那么难。

＆＃34;您所要做的就是转到有保证金的主要货币，＆＃34;在这里您可以看到保证金是1.4 ems，＆＃34;然后只需将1.4 em应用于该条目元＆＃34。问题是，这不起作用。你知道，如果我在这里说-1.4 ems，它看起来就像是一直跨越，但如果你仔细观察，你可以看到左边和右边有一条白色的细线。这是因为即使主页上的页边距是1.4 em，它实际上是入口元中的1.4-em，因为我们使用em大小来调整内容的大小，你注意到entry meta有一个字体大小95％。

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

现在，对于侧边栏，如何计算em值。我们有两个容器。父容器的字体大小为1 em，浏览器中计算的字体大小为14.4像素。嵌套容器的字体大小为95％，此处计算的字体大小为13.68。 13.68是14.4的95％。父容器的边距为1.4 ems，在浏览器中，相当于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中，您可以看到，在条目元规则下，我创建了两个新属性。

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

我已经在这里解决了这个突破点。我们有一个30 ems的断点，在这里我必须改变该边际值，因为在该断点处，内容周围的边距从1.4变为1.8。结果，我们现在获得-1.8947等。这样就解决了较小的屏幕问题。但是这个大屏幕的内容是什么，内容浮在中间？那么我们必须做一些完全不同的事情，这就是为什么我已经对这一部分进行了评论，所以我可以完全解释发生了什么。

我会删除评论，然后我们会查看此媒体查询。当屏幕宽度超过57 ems时，我们锁定主要内容的宽度并将其浮动到中心。为了让入口元跨越整个宽度，我们现在必须弄清楚实际视口的宽度，然后根据它定位入口元。我在这里所做的是使用CSS3中一个称为vw或视口宽度的新测量单位。所以我按照以下方式进行了设置。如果浏览器支持vw单元，则条目元的宽度将与视口一样宽。

然后我必须减去我们内容的宽度，所以从视口宽度减去52.2 ems，但由于数学运算，我必须以向后的方式执行此操作。所以这里我们有-100视口宽度加上52.2。这给了我们所有的视口宽度减去主要内容。然后我将其除以2，并将内容向左移动该值。最终结果是，您将在重新加载页面时看到。现在内容横跨整个宽度，但我知道你会说，＆＃34;但我在这边看到白色。＆＃34;这实际上是因为此移动视图的预览。

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

我们在这里欺骗的方式是抓住内容区域，所以整个区域，并说内容区域，我要阻止overflow-x，这是水平溢出，只是设置它隐藏。这样，由于这个盒子而发生的溢出只是隐藏起来，你无法看到它。所以现在感谢一些CSS炼金术，我们现在有一个元内容区域，无论屏幕大小如何，都有全宽背景。

CSS 100vw导致滚动条显示，不幸使用100％

2 个答案: