0

你好 SO 社区！

我知道这个问题有很多变体，但是似乎没有人像我一样尝试做一些非常重要的事情。我的场景不能轻易使用width: 100%. 所以让我们开始这个派对吧！

在准备好 Chris Coyier 关于从对象边界破解 CSS 三角形的文章后，我部分地得到了这个想法。

重要让我首先声明，我知道在大多数情况下，您会使用width:100%，但是，我正在使用边框，您不能使用带边框的百分比 :(

我也真的真的很想避免在这个解决方案中使用 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;
    }

现场演示

单击此处查看实时演示（我无法使用 codepen，因为我使用的是 vw 和 vh）

目标

  1. 将&&元素.divider-blue-red扩展.divider-red-green到视图窗口的 100%，不包括滚动条
  2. 不使用 javascript（纯 CSS 解决方案）
  3. 未将正文设置为“最大宽度：100%”
  4. 有一个很酷的流体设计，随着设备的宽度和高度滚动！:)
4

2 回答 2

3

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

*,
*: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。由于滚动条宽度存在差异，请设置一个高于预期的值，并使用阴影填充（可能的）空白空间。

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

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

于 2016-04-30T08:07:24.967 回答
-1

阅读此内容可能会有所帮助

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

“你所要做的就是转到有边距的 main，”在这里你看到边距是 1.4 em，“然后只需将 1.4 em 应用到入口元。” 问题是，这行不通。你看，如果我在这里说-1.4 ems，它看起来像是跨越了一路，但如果你仔细观察，你会看到左右两边都有一条轻微的白线。这是因为尽管主页边距是 1.4 em，但在 entry meta 中它实际上是 1.4 em，因为我们使用 em 大小来调整内容的大小，并且您注意到 entry meta 的字体大小为 95%。

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

现在对于侧边栏，如何计算 em 值。我们有两个容器。父容器的字体大小为 1 em，在浏览器中计算出来的字体大小为 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 中，您会在这里看到，在 entry 元规则下，我创建了两个新属性。

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

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

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

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

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

我们这里作弊的方法是抓取内容区域，所以整个区域，对于内容区域，我要挡住overflow-x，也就是水平溢出，设置为隐藏即可。这样，由于此框而发生的溢出只是隐藏了，您看不到它。所以现在感谢一些 CSS 炼金术，我们现在有一个元内容区域，它有一个全宽背景，不管屏幕大小。

于 2016-04-30T05:44:34.237 回答