具有可滚动内容的容器完全静止高度（顺风）
Container full rest height with scrollable content (Tailwind)
在我的页面上，我需要两个容器，它们都在彼此上方并留有一些余量。
下面的容器需要填满屏幕的其余部分，但不能多也不能少。在这个较低的容器中，我有一些内容（如导航栏）应该固定在那里并始终可见，还有我从数据库接收的另一个内容，因此内容应该是动态和可滚动的。问题是，容器的可滚动内容总是溢出下层容器，从而超出视口。我需要将可滚动内容保留在我的下部容器中。我试图通过几个 overflow-hidden/Overflow-auto 修复来解决这个问题，但没有成功。所有内容也应该有固定的定位（margins/paddings）和宽度和高度。
我的一些代码：
Index.vue
<template>
<div class="h-screen bg-gray-600 flex flex-col">
<div
class="flex h-56px w-auto z-1001 flex h-56px top-10 tablet:left-8 mb-16 object- center tablet:object-left-top inline-flex justify-center items-center bg-grey-200 rounded-lg shadow-rb z-1001"
>
<UpperContainer />
</div>
<div
class="flex-1 h-full w-full tablet:w-420px mb-10 tablet:left-8 justify-center items-center bg-green-200 rounded-lg shadow-rb z-1001"
>
<LowerContainer />
</div>
LowerContainer.vue
<template>
<div class="">
<FixedContentContainer class="">
<FixedContent name="Example">
<ScrollableContentContainer :scrollableContent="content"
class="relative h-full w-full bg-blue-400 overflow-hidden"
></ScrollableContentContainer
></FixedContent>
</FixedContentContainer>
ScrollableContentContainer.vue
<div class="overflow-auto w-auto absolute h-full">
<div v-for="content in scrollableContent" :key="content.name">
<ScrollableContent
:name="content.name"
/>
</div>
我已经在 Tailwind Play 中为您创建了框架/工作代码。
阅读下面类并理解。很酷
flex-col 将上下容器分开
space-y-8是上下容器之间的space
min-h-screen max-h-screen设置主要div适合页面
flex-1 下部容器将增长并消耗剩余的 space 剩余即 h-screen (100vh) - h-24（上部容器）= 下部容器的高度
overflow-hidden 在较低的容器上。不希望内部内容超出此视口
flex-col 独立的导航和可滚动容器
flex-1 在可滚动容器上使用剩余高度，即剩余较低容器的高度 - 导航（h-24）= 可滚动容器的高度
overflow-x-hidden overflow-y-auto 这将设置容器溢出 y 轴
<div class="flex flex-col min-h-screen max-h-screen bg-gray-50 space-y-8">
<!-- Upper -->
<div class="flex h-24 bg-gray-200">
<div class="flex w-full justify-center items-center">Upper Container</div>
</div>
<!-- Lower -->
<div class="flex flex-1 bg-gray-200 p-8 overflow-hidden">
<div class="flex flex-col flex-1 space-y-8">
<!-- Navigation -->
<div class="flex bg-gray-300 h-24">
<div class="flex w-full justify-center items-center">Navigation</div>
</div>
<!-- Scrollable Content -->
<div class="flex flex-1 bg-gray-300 p-8 overflow-x-hidden overflow-y-auto">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio minus et ea esse, quo officiis incidunt omnis laboriosam nesciunt quas ipsum deleniti repudiandae sint illo, odio commodi dolore impedit inventore. Maiores reprehenderit praesentium debitis mollitia impedit quasi qui aspernatur numquam atque, perferendis optio culpa! Quos placeat iure, deserunt unde ipsum repudiandae perferendis, doloribus fugiat qui aliquid iste praesentium, itaque officia. Obcaecati porro, consequuntur saepe maiores laborum laudantium eos nihil totam ea pariatur nam soluta neque nemo dolorem amet repudiandae laboriosam illum alias fugiat eaque minus. Provident, enim minima. Facere, obcaecati? Asperiores error blanditiis quos nostrum corporis nobis. Libero voluptate expedita maxime voluptates doloribus veniam quam vitae est minima corrupti dicta accusantium distinctio, aliquid tempora eum, laboriosam, nulla natus debitis cumque. Dolor velit possimus nesciunt deleniti quas dolorum neque cum reiciendis pariatur praesentium in qui voluptatibus provident a numquam, tempore distinctio impedit dicta non eos aut eveniet commodi doloremque. Cum, earum. Iste soluta perspiciatis debitis vitae ipsam doloribus aliquid voluptates repellat quae. Rerum enim eum nobis impedit molestias dolorum voluptatum animi exercitationem laudantium aut. Porro omnis excepturi harum reprehenderit doloribus ipsum. Rerum sed fuga amet totam, excepturi accusantium, quidem, perferendis nam doloremque expedita eligendi? Ratione harum exercitationem delectus iure asperiores? Nobis accusantium qui in. Laudantium, ducimus sit ipsum perspiciatis cumque vero? Soluta architecto eum ad suscipit beatae, nisi a, iusto dolore aperiam molestias voluptas pariatur perferendis facilis voluptatem optio nihil nulla explicabo saepe rerum corporis aliquid provident. Illum velit molestias totam? Esse, fugit tempora neque ipsum ea blanditiis culpa facere nobis soluta totam numquam voluptatum alias ad aperiam hic reprehenderit cumque quia, veniam incidunt illum fuga dignissimos. Animi ratione inventore doloremque. Laborum eaque ipsam nemo voluptates libero molestias, a consectetur accusantium consequatur mollitia. Deleniti, et? Vero aut laudantium alias aspernatur atque accusamus aliquid corporis architecto. Perspiciatis ducimus sed odio ex sint! Nihil rerum aut consequuntur reiciendis, officia amet soluta necessitatibus possimus. Dolorem excepturi in aperiam hic, rerum distinctio ut iure voluptate repudiandae tempore quidem facere quasi temporibus sapiente sequi eius eos. Dolorem cupiditate dolore in? Ipsa iusto quibusdam beatae consectetur ipsum nobis eum adipisci. Earum hic architecto voluptas fugit velit excepturi ab harum quibusdam nobis delectus nostrum explicabo, ut omnis? Praesentium. Fugiat quidem voluptates accusantium quisquam est, nulla inventore repellendus cumque doloribus rem nobis molestiae temporibus hic magni reiciendis. Nam earum commodi, et excepturi quae molestiae veniam nesciunt recusandae tenetur ducimus. Qui quas officiis iste. Libero a ipsam saepe accusantium illo velit obcaecati. Iure eligendi quasi voluptas labore provident nemo suscipit quis itaque sed libero earum autem nobis, atque omnis eius. Illum reiciendis, repellendus laudantium temporibus id blanditiis odio omnis ad quidem expedita error asperiores quo, hic culpa quisquam sequi maiores dolores fugit aut harum deleniti eum reprehenderit ex perferendis? Quidem. Qui odio, eius nulla minus libero nesciunt incidunt voluptatem repellat sapiente quae necessitatibus iusto unde nemo reprehenderit atque enim, vitae mollitia pariatur cupiditate ipsa? Iste incidunt excepturi accusamus a? Delectus! Aut dolores temporibus minus odio animi provident impedit repudiandae perspiciatis, eveniet autem accusantium suscipit expedita quas voluptatum veritatis nihil recusandae nemo possimus totam tempora, id sunt saepe dolor? Incidunt, laudantium! Harum eveniet dolorum cupiditate inventore recusandae perspiciatis dolorem aut suscipit optio dignissimos ut, nemo quod mollitia officia ab voluptatem nostrum ipsum quas? Rem similique, amet numquam reprehenderit optio harum repellat. Sequi, dolorum rem. Aspernatur eos sint, dolores neque sequi aliquid voluptates aliquam blanditiis repellendus eaque aperiam laborum corporis provident at culpa quasi, sunt voluptatem modi? Similique quisquam officiis minus ratione. Quasi asperiores natus libero doloremque earum labore perspiciatis nihil corrupti maxime. Voluptas ipsum rerum omnis, inventore quibusdam repudiandae, saepe facere at consectetur fugiat adipisci voluptatibus iure ea similique eveniet eligendi.
</div>
</div>
</div>
</div>
在我的页面上，我需要两个容器，它们都在彼此上方并留有一些余量。 下面的容器需要填满屏幕的其余部分，但不能多也不能少。在这个较低的容器中，我有一些内容（如导航栏）应该固定在那里并始终可见，还有我从数据库接收的另一个内容，因此内容应该是动态和可滚动的。问题是，容器的可滚动内容总是溢出下层容器，从而超出视口。我需要将可滚动内容保留在我的下部容器中。我试图通过几个 overflow-hidden/Overflow-auto 修复来解决这个问题，但没有成功。所有内容也应该有固定的定位（margins/paddings）和宽度和高度。
我的一些代码：
Index.vue
<template>
<div class="h-screen bg-gray-600 flex flex-col">
<div
class="flex h-56px w-auto z-1001 flex h-56px top-10 tablet:left-8 mb-16 object- center tablet:object-left-top inline-flex justify-center items-center bg-grey-200 rounded-lg shadow-rb z-1001"
>
<UpperContainer />
</div>
<div
class="flex-1 h-full w-full tablet:w-420px mb-10 tablet:left-8 justify-center items-center bg-green-200 rounded-lg shadow-rb z-1001"
>
<LowerContainer />
</div>
LowerContainer.vue
<template>
<div class="">
<FixedContentContainer class="">
<FixedContent name="Example">
<ScrollableContentContainer :scrollableContent="content"
class="relative h-full w-full bg-blue-400 overflow-hidden"
></ScrollableContentContainer
></FixedContent>
</FixedContentContainer>
ScrollableContentContainer.vue
<div class="overflow-auto w-auto absolute h-full">
<div v-for="content in scrollableContent" :key="content.name">
<ScrollableContent
:name="content.name"
/>
</div>
我已经在 Tailwind Play 中为您创建了框架/工作代码。
阅读下面类并理解。很酷
flex-col 将上下容器分开
space-y-8是上下容器之间的space
min-h-screen max-h-screen设置主要div适合页面
flex-1 下部容器将增长并消耗剩余的 space 剩余即 h-screen (100vh) - h-24（上部容器）= 下部容器的高度
overflow-hidden 在较低的容器上。不希望内部内容超出此视口
flex-col 独立的导航和可滚动容器
flex-1 在可滚动容器上使用剩余高度，即剩余较低容器的高度 - 导航（h-24）= 可滚动容器的高度
overflow-x-hidden overflow-y-auto 这将设置容器溢出 y 轴
<div class="flex flex-col min-h-screen max-h-screen bg-gray-50 space-y-8">
<!-- Upper -->
<div class="flex h-24 bg-gray-200">
<div class="flex w-full justify-center items-center">Upper Container</div>
</div>
<!-- Lower -->
<div class="flex flex-1 bg-gray-200 p-8 overflow-hidden">
<div class="flex flex-col flex-1 space-y-8">
<!-- Navigation -->
<div class="flex bg-gray-300 h-24">
<div class="flex w-full justify-center items-center">Navigation</div>
</div>
<!-- Scrollable Content -->
<div class="flex flex-1 bg-gray-300 p-8 overflow-x-hidden overflow-y-auto">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio minus et ea esse, quo officiis incidunt omnis laboriosam nesciunt quas ipsum deleniti repudiandae sint illo, odio commodi dolore impedit inventore. Maiores reprehenderit praesentium debitis mollitia impedit quasi qui aspernatur numquam atque, perferendis optio culpa! Quos placeat iure, deserunt unde ipsum repudiandae perferendis, doloribus fugiat qui aliquid iste praesentium, itaque officia. Obcaecati porro, consequuntur saepe maiores laborum laudantium eos nihil totam ea pariatur nam soluta neque nemo dolorem amet repudiandae laboriosam illum alias fugiat eaque minus. Provident, enim minima. Facere, obcaecati? Asperiores error blanditiis quos nostrum corporis nobis. Libero voluptate expedita maxime voluptates doloribus veniam quam vitae est minima corrupti dicta accusantium distinctio, aliquid tempora eum, laboriosam, nulla natus debitis cumque. Dolor velit possimus nesciunt deleniti quas dolorum neque cum reiciendis pariatur praesentium in qui voluptatibus provident a numquam, tempore distinctio impedit dicta non eos aut eveniet commodi doloremque. Cum, earum. Iste soluta perspiciatis debitis vitae ipsam doloribus aliquid voluptates repellat quae. Rerum enim eum nobis impedit molestias dolorum voluptatum animi exercitationem laudantium aut. Porro omnis excepturi harum reprehenderit doloribus ipsum. Rerum sed fuga amet totam, excepturi accusantium, quidem, perferendis nam doloremque expedita eligendi? Ratione harum exercitationem delectus iure asperiores? Nobis accusantium qui in. Laudantium, ducimus sit ipsum perspiciatis cumque vero? Soluta architecto eum ad suscipit beatae, nisi a, iusto dolore aperiam molestias voluptas pariatur perferendis facilis voluptatem optio nihil nulla explicabo saepe rerum corporis aliquid provident. Illum velit molestias totam? Esse, fugit tempora neque ipsum ea blanditiis culpa facere nobis soluta totam numquam voluptatum alias ad aperiam hic reprehenderit cumque quia, veniam incidunt illum fuga dignissimos. Animi ratione inventore doloremque. Laborum eaque ipsam nemo voluptates libero molestias, a consectetur accusantium consequatur mollitia. Deleniti, et? Vero aut laudantium alias aspernatur atque accusamus aliquid corporis architecto. Perspiciatis ducimus sed odio ex sint! Nihil rerum aut consequuntur reiciendis, officia amet soluta necessitatibus possimus. Dolorem excepturi in aperiam hic, rerum distinctio ut iure voluptate repudiandae tempore quidem facere quasi temporibus sapiente sequi eius eos. Dolorem cupiditate dolore in? Ipsa iusto quibusdam beatae consectetur ipsum nobis eum adipisci. Earum hic architecto voluptas fugit velit excepturi ab harum quibusdam nobis delectus nostrum explicabo, ut omnis? Praesentium. Fugiat quidem voluptates accusantium quisquam est, nulla inventore repellendus cumque doloribus rem nobis molestiae temporibus hic magni reiciendis. Nam earum commodi, et excepturi quae molestiae veniam nesciunt recusandae tenetur ducimus. Qui quas officiis iste. Libero a ipsam saepe accusantium illo velit obcaecati. Iure eligendi quasi voluptas labore provident nemo suscipit quis itaque sed libero earum autem nobis, atque omnis eius. Illum reiciendis, repellendus laudantium temporibus id blanditiis odio omnis ad quidem expedita error asperiores quo, hic culpa quisquam sequi maiores dolores fugit aut harum deleniti eum reprehenderit ex perferendis? Quidem. Qui odio, eius nulla minus libero nesciunt incidunt voluptatem repellat sapiente quae necessitatibus iusto unde nemo reprehenderit atque enim, vitae mollitia pariatur cupiditate ipsa? Iste incidunt excepturi accusamus a? Delectus! Aut dolores temporibus minus odio animi provident impedit repudiandae perspiciatis, eveniet autem accusantium suscipit expedita quas voluptatum veritatis nihil recusandae nemo possimus totam tempora, id sunt saepe dolor? Incidunt, laudantium! Harum eveniet dolorum cupiditate inventore recusandae perspiciatis dolorem aut suscipit optio dignissimos ut, nemo quod mollitia officia ab voluptatem nostrum ipsum quas? Rem similique, amet numquam reprehenderit optio harum repellat. Sequi, dolorum rem. Aspernatur eos sint, dolores neque sequi aliquid voluptates aliquam blanditiis repellendus eaque aperiam laborum corporis provident at culpa quasi, sunt voluptatem modi? Similique quisquam officiis minus ratione. Quasi asperiores natus libero doloremque earum labore perspiciatis nihil corrupti maxime. Voluptas ipsum rerum omnis, inventore quibusdam repudiandae, saepe facere at consectetur fugiat adipisci voluptatibus iure ea similique eveniet eligendi.
</div>
</div>
</div>
</div>