gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 14:33:58 26 4
gpt4 key购买 nike

我在我的 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>
带有 h-screen 的 div是根还是我的应用程序。组件 <header>顺风高度为 h-32问题是第二个div导致页面在底部滚动, <header>的高度(h-32)。
我想做的事
如果没有内容,我希望第二个 div 填充屏幕的剩余高度,但仅此而已。
如果有内容,我希望它根据需要增长。

最佳答案

您可以利用 .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>

关于tailwind-css - 如何在顺风中使 div 填充父级的全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63412303/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com