html - CSS:赋予元素与 "grandparent"元素相同的宽度

Question

我有一个 super 容器(适合屏幕宽度，有边距和填充)，它包含一个更宽的容器，它又包含(抱歉冗余)数量不确定(数据库驱动)的左浮动框。它都是 Backbone/Underscore 模板的一部分。

我希望盒子的宽度与 super 容器的宽度相同，以便一次只显示一个(主干 View 中有水平滚动功能)。我知道我可以使用 jQuery 获取 super 容器的宽度并在渲染时将其应用于框，但我肯定更喜欢纯 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 来匹配它对于盒子

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

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.

1vw =1/100th of the width of the viewport

- MDN