Question

我试图让div填充剩余屏幕空间的高度，并在这里找到了很好的答案：Make a div fill the height of the remaining screen space（所选答案）。

我对https://stackoverflow.com/users/1490904/pebbl的问题是，当他呈现内容时，内容的灵活容器是height:100%，并且是height:100%的html和body元素的直接子元素。在我的应用程序中，在body和我的flex容器之间有一堆介入元素，如果我希望我的flex容器填充所有可用的垂直空间，则每个元素也必须有height:100%。

如果我只有像

这样的CSS规则，它会很有用

 * {
     height: 100%;
   }

但那太疯狂了吧？我不知道将我的DOM中的每个元素设置为100％是否有问题，但如果我不需要，我宁愿不这样做。

我尝试过（认为这会选择body和我的flex-box之间的每个元素）：

body * .flex-box {
  height: 100%;
}

没有运气。

我的html（经过反应处理后）看起来有点像：

<html>
  <body>
    <div>
      <div class="another-div">
        <div class="another-div navbar-and-whatnot">
          <div class="yet-another-bunch-of-divs">
            <div class="flex-box">
              <div class="flex-remaining-height">
                <svg class="this-should-be-big" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我的scss文件的相关部分（包括沿着路径设置高度的非工作尝试）是：

html, body {
  height: 100%;
}
body * .flex-box { // this part doesn't work. the rest comes from https://stackoverflow.com/a/24979148/1368860
  height: 100%;
}
.flex-box {
  display: flex;
  flex-flow: column;
  height: 100%;
  //.flex-row { border: 1px dotted grey; }
  .flex-content-height {
    flex: 0 1 auto;
    /* The above is shorthand for:
    flex-grow: 0,
    flex-shrink: 1,
    flex-basis: auto
    */
  }
  .flex-remaining-height {
    flex: 1 1 auto;
  }
  .flex-fixed-height-40 {
    flex: 0 1 40px;
  }
}

我想现在我可以找出body和我的弹性盒之间的路径中的每个元素并为它们设置高度，但这非常脆弱。我将需要不断修复它。

顺便说一句，我正在使用react-bootstrap，所以如果有一个更简单的解决方案，我会接受它。

而且，对于进一步的上下文，我想要这样做的原因是我使用的库创建了一个与其周围div一样大的SVG元素，我希望SVG尽可能大（并且适合屏幕）。

P.P.S。我也加载了jquery。我想这将是最简单的解决方案。不过，拥有一个css解决方案会很好。

Answer 1

CSS中无法选择＆＃34;路径＆＃34;这种。 使用*选择所有内容都很危险且性能也不好。我建议您自己定义路径。最简单的方法可能是定义一个类，比如.full-height，只需将此类赋予路径中的所有元素即可。这样，您只需将类添加到添加到此路径的任何新元素中，CSS就可以保持不变。

.full-height {
  height: 100%
}

Answer 2

我担心你在那里运气不好。编写与给定元素的所有祖先匹配的单个复杂选择器是不可能的。

选择器body * .flex-box匹配.flex-box，其中包含至少一个出现在其与body之间的祖先。这样的选择器意味着body > .flex-box将不匹配。它与.flex-box以外的任何其他内容都不匹配（除非.flex-box本身包含另一个.flex-box，在这种情况下，两者都会匹配，并且会出现这种情况。

路径中每个节点的css选择器

2 个答案: