CSS - 如何使容器适合祖父母的所有可用高度？

Question

我正在开发一个Web应用程序并遇到布局问题。

这是预期的设计，包括3个主要部分：

• 文章标题
• 文章内容
• 文章页脚

使用CSS Flexbox实现此设计非常容易。

html, body, article {
  height: 100%;
  margin: 0;
  color: white;
}

.article {
  display: flex;
  flex-direction: column;
}

  .article-header {
    background-color: orange;
  }
  
  .article-footer {
    background-color: green;
  }
  
  .article-content {
    flex-grow: 1;
    background-color: CornflowerBlue;  
  }
 

<article class="article">
  <header class="article-header">Header</header>
  <div class="article-content">Article Content</div>
  <footer class="article-footer">Footer</footer>
</article>

然而，在实际应用程序中，HTML元素嵌套更深，有时不受控制（使用第三方组件或在Angular / React中进行转换）

因此，HTML通常如下所示：

html, body, article {
  height: 100%;
  margin: 0;
}

.article {
  display: flex;
  flex-direction: column;
}

  .article-header {
    background-color: orange;
  }
  
  .article-footer {
    background-color: green;
  }

  .article-wrapper {
    flex-grow: 1;
  }
 
  .article-content {
    flex-grow: 1;
    background-color: CornflowerBlue;  
  }
 

<article class="article">
  <header class="article-header">Header</header>
  <div class="article-wrapper">
    <div>
      <div>
        <div class="article-content">
           Article Content.
           Can I fit all available height?
        </div>
       </div>
      </div>
    </div>
  <footer class="article-footer">Footer</footer>
</article>

在这种情况下，似乎只有一种方法可以使 .article-content 适合所有可用的高度，将这些样式添加到 .article-wrapper 的每个容器中em> to article-content ：

display: flex;
flex-direction: column;
flex-grow: 1;

但是，正如我所提到的，这很成问题，因为有时嵌套相当深或容器元素是由第三方组件生成的。

请告诉我是否有更好的方法来实现所需的设计。

提前谢谢！

Answer 1

只有flex容器的直接子容变为flex项，因此可以应用属性flex-grow: 1。

因此，要使其工作，您需要将article-wrapper及其div后代降至article-content flex属性，其中所有3个都需要同时为flex容器和flex项目

.article-wrapper,
.article-wrapper > div,
.article-wrapper > div > div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

简单地说，.article-wrapper是第一个div的flex容器，第一个div将是flex项目到.article-wrapper，但也将flex容器扩展到第二个div等等。

更新

此外，根据您发布的图片，article-content应该在内容超出其高度时滚动，为了实现这一点，我将overflow: auto添加到wrapper-content规则

示例代码段

html, body, article {
  height: 100%;
  margin: 0;
}

.article {
  display: flex;
  flex-direction: column;
}

  .article-header {
    background-color: orange;
  }
  
  .article-footer {
    background-color: green;
  }

  .article-wrapper {
     overflow: auto;
  }

  .article-wrapper,
  .article-wrapper > div,
  .article-wrapper > div > div {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .article-content {
    flex-grow: 1;
    background-color: CornflowerBlue;  
  }

<article class="article">
  <header class="article-header">Header</header>
  <div class="article-wrapper">
    <div>
      <div>
        <div class="article-content">
           Article Content.
           Can I fit all available height?
           <br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
           Scroll overflowed content<br><br>
        </div>
       </div>
      </div>
    </div>
  <footer class="article-footer">Footer</footer>
</article>