如何在顺风中使 div 填充父级的全高

Question

我在我的 Vuejs 应用程序中使用了顺风。我有这个简单的模板

<template>
  <div class="bg-gray-500 h-screen">
    <Header /><!-- //height 32 -->
    <div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg">
      <router-view />
    </div>
  </div>
</template>

divh-screen是根或我的应用程序。该组件<header>的顺风高度为h-32

问题是第二个 div 导致页面在底部滚动，即<header>(h-32)的高度。

我想做的事

如果没有内容，我希望第二个 div 填充屏幕的剩余高度，但仅此而已。如果有内容，我希望它根据需要增长。

Answer 1

使用flex-1是您的解决方案在父级中扩展某个组件的最佳选择：

用于flex-1允许弹性项目根据需要增大和缩小，忽略其初始大小：

垂直

<div class="flex h-screen flex-col">
  <div class="h-50 bg-cyan-400 text-center text-4xl">Header</div>
  <div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>

输出：

水平

<div class="flex w-screen ">
  <div class="h-50 bg-cyan-400 text-center text-4xl">NavBar</div>
  <div class="flex-1 bg-yellow-400 text-center text-4xl">I am the body</div>
</div>

输出：

Answer 2

为此.flex，您可以利用,.flex-col和.flex-1。查看文档。

<div class="bg-gray-500 flex flex-col h-screen">
  <div class="flex h-32 bg-gray-200"></div>
  <div class="flex-1 w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg bg-gray-300">
    <router-view />
  </div>
</div>