css 如何使div在顺风时填充父级的整个高度

0wi1tuuw 于 2023-03-14 发布在其他

关注(0)|答案(2)|浏览(204)

我在我的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是根或my app。组件<header>的顺风高度为h-32
问题是第二个div导致页面在底部滚动，即<header>（h-32）的高度。
∮我想做的∮
如果没有内容，我希望第二个div填充屏幕的剩余高度，但不会超过此高度。如果有内容，我希望它根据需要增长。

css

来源：https://stackoverflow.com/questions/63412303/how-to-make-div-fill-full-height-of-parent-in-tailwind

2条答案

按热度按时间

v2g6jxz61#

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

赞(0）回复(0）举报 2023-03-14

vuktfyat2#

flex-1最适合您的解决方案在父级中扩展某个组件：
使用flex-1允许Flex项目根据需要增长和收缩，忽略其初始大小：
垂直方向

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

输出：

赞(0）回复(0）举报 2023-03-14

我来回答

css 如何使div在顺风时填充父级的整个高度

2条答案

输出：

水平

输出：

相关问题

热门标签

最新问答