如何在顺风中使 div 填充父级的全高 [英] How to make div fill full height of parent in tailwind
问题描述
我在我的 Vuejs 应用中使用了 Tailwind.我有这个简单的模板
<div class="bg-gray-500 h-screen"><标题/><!--//高度32--><div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg"><路由器视图/>带有 h-screen 的 div 是根或我的应用程序.组件h-32
问题是第二个div导致页面在底部滚动，
我想做什么
如果没有内容，我希望第二个div填充屏幕的剩余高度，但不要更多.如果有内容，我希望它按需增长.
您可以利用 .flex、.flex-col 和 .flex-1 为此.查看文档.
<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"><路由器视图/>I am using tailwind in my Vuejs app. I have this simple template
<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>
The div with h-screen is the root or my app. The component<header> has a tailwind height of h-32
The problem is that the second div causes the page to scroll at the bottom, the height of the <header> (h-32).
What I want to do
If there is no content, I want the second div to fill the remaining height of the screen but no more. If there is content, I want it grow as necessary.
You can leverage .flex, .flex-col and .flex-1 for this. Check out 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>
这篇关于如何在顺风中使 div 填充父级的全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
