CSS：给出与“祖父母”元素相同宽度的元素

Question

我有一个超级容器（适合屏幕宽度，有边距和填充），其中包含一个更宽的容器，而容器又包含（对于冗余而言）未确定（DB驱动）的左浮动框数。 它是Backbone / Underscore模板的所有部分。

我希望盒子的宽度与超级容器的宽度相同，以便一次只能看到一个（在Backbone View中有一个水平滚动功能）。 我知道我可以使用jQuery获取超级容器的宽度并在渲染时将其应用于盒子，但我绝对更喜欢纯CSS解决方案以避免屏幕大小调整的问题。

为了清楚起见：

HTML：

<div id="supercontainer">
  <div id="wide-container">
    <div class="fun-box"></div>
    <div class="fun-box"></div>
    <div class="fun-box"></div>
  </div>
</div>

CSS：

#supercontainer {
  width:100%;
  overflow:hidden;
  margin:50px;
}

#wide-container {
  display:table;
}

.fun-box {
  height:100%;
  float:left;
  width: ???; /* something that makes it as wide as the supercontainer */
}

我怎样才能做到这一点？

Answer 1

如果#supercontainer始终具有100%的窗口宽度，则可以通过应用width: 100vw来匹配它width: 100vw用于框

.fun-box {
  height:100%;
  float:left;
  width: 100vw; 
}

视口百分比长度定义了相对于视口大小的长度，即文档的可见部分。

1vw =视口宽度的1/100

- MDN

Answer 2

你可以尝试使.fun-box的三分之一#wide-container的宽度，和#wide-container三次#supercontainer ：

#wide-container {
    width: 300%;
}
.fun-box {
    width: 33.33%;
}

演示