【问题标题】：How to make div fill full height of parent in tailwind如何使div在顺风中填充父级的全高
【发布时间】：2020-12-04 07:32:33
【问题描述】：

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

<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>

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

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

我想做什么

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

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您可以为此利用.flex、.flex-col 和.flex-1。查看docs。

<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>

【讨论】：