填充剩余屏幕空间的宽度（跨容器）

Question

我正在使用Bootstrap 4 Alpha 3（Flexbox enabled version）。

Jsfiddle

＆＃13;

＆＃13;

body {
  background-color: lightgreen;
}
[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

＆＃13;

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      AA
    </div>
    <div class="col-xs-10">
      BB
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
      CC
    </div>
    <div class="col-xs-6">
      DD
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这就是现在的样子：

有没有办法（特别是使用Flexbox）让BB填充剩余屏幕空间的宽度（跨越container），如下所示？感谢

Answer 1

BB元素是一个流入的弹性项目，仅限于其容器（.row）。

要使其溢出其父级并获取视口的剩余宽度，您可以尝试：

＆＃13;

＆＃13;

.container > .row:first-child > .col-xs-10 {   /* 1 */
  position: absolute;                          /* 2 */
  width: 100%;                                 /* 3 */
  margin-left: 16.7%                           /* 4 */
}

.container > .row:first-child {
  position: relative;                          /* 5 */
}

body {
  background-color: lightgreen;
}

[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

＆＃13;

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-2">AA</div>
    <div class="col-xs-10">BB</div>
  </div>
  <div class="row">
    <div class="col-xs-6">CC</div>
    <div class="col-xs-6">DD</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

revised fiddle

注意：

1. 瞄准BB元素。
2. 从document flow
中移除BB
3. 任意全宽
4. 位置BB立即从AA的右侧开始（宽度为flex: 0 0 16.66667%）
5. 使容器成为绝对定位的孩子的边界框（{​​{3}}）。

当然，此方法的（潜在）问题是第3项。

因为BB相对于其父级是绝对定位的，所以我们不知道视口边缘的确切长度。给出太宽的宽度会导致水平滚动条，如我的例子所示。

一种解决方法是将overflow-x: hidden应用于body元素，这将删除滚动条，只需在视口边缘剪切BB。

或者我们可以从父级移除position: relative，从而使BB相对于视口。此方法可以将BB精确地调整到视口边缘，但是以第4项为代价：margin-left将不再精确。

但是，让我们试一试：

编辑：除了margin-left不足之外，这种方法还存在另一个缺陷。我没有删除示例，而是将其保留用于学习目的。看看你能否在到达目的地之前找到问题： - ）

＆＃13;
＆＃13;
.container > .row:first-child > .col-xs-10 {   
  position: absolute;                          
  width: 75%;                                  /* 6 */
  margin-left: 25%;                            /* 6 */
  left: 0;                                     /* 6 */
}

.container > .row:first-child > .col-xs-2 {    /* 7 */
    flex-grow: 1;
}

body {
  background-color: lightgreen;
}

[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}
＆＃13;
<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-2">AA</div>
    <div class="col-xs-10">BB</div>
  </div>
  <div class="row">
    <div class="col-xs-6">CC</div>
    <div class="col-xs-6">DD</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

nearest positioned ancestor

注意：

1. BB相对于初始包含块（即视口）的大小，对齐和定位。
2. AA，使用flex: 0 0 16.666667%在原始代码中调整大小，flex-grow: 1可填充自身与BB之间的任何空白。

现在BB正好在视口边缘结束。但是，我们必须让AA＆＃34; flex＆＃34;稍微防止由于BB margin-left不精确造成的任何间隙。

编辑：上述方法的问题是：因为BB绝对定位，所以它会从文档流中删除。这意味着AA甚至不知道它存在。因此，AA上的flex-grow会将其一直扩展到容器的边缘，而不是BB的开头。 。

其他替代方案包括：

1. 使容器全宽，然后管理弹性项目的长度和边距。 （这将涉及对Bootstrap框架的重大改动，这就是我没有追求它的原因。）

2. 的JavaScript

Answer 2

由于似乎超出容器的背景是纯粹的视觉要求，并且它不包含实际的内容，我们可以使用此{{>中列出的技术3}}

我们绝对会在相关元素后面放置一个100vw宽的伪元素，并将overflow-x:hidden应用于body，这样我们就不会获得水平滚动条。

＆＃13;

＆＃13;

body {
  background-color: lightgreen;
  overflow-x:hidden;
  margin:0;
  padding:0;
}
[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

.expando {
  position:relative;
  }

.expando::after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100vw;
  background:inherit;
  z-index:-1;
  }

＆＃13;

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      AA
    </div>
    <div class="col-xs-10 expando">
      BB
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
      CC
    </div>
    <div class="col-xs-6">
      DD
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;