带有可滚动内容的容器完全静止高度（Tailwind）

Posted 2023-03-07

【中文标题】带有可滚动内容的容器完全静止高度（Tailwind）

【英文标题】：Container full rest height with scrollable content (Tailwind)

【发布时间】：2021-05-22 06:05:32

【问题描述】：

在我的页面上，我需要两个相互重叠的容器，并留有一些边距。 下部容器需要填满屏幕的其余部分，但不多不少。在这个较低的容器内，我有一些内容（如导航栏）应该固定在那里并且一直可见，还有我从数据库接收到的另一个内容，因此内容应该是动态的和可滚动的。问题是，容器的可滚动内容总是溢出下部容器，因此会超出视口。我需要将可滚动内容保留在我的下部容器中。我试图用几个溢出隐藏/溢出自动修复来解决这个问题，但没有成功。所有内容还应该有固定的位置（边距/填充）和宽度和高度。

我的一些代码：

索引.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>

【参考方案1】：

我在Tailwind Play 中为您创建了一个框架/工作代码。

---

阅读以下课程并理解。很酷。

flex-col 将与下容器分开

space-y-8是上下容器之间的空间

min-h-screen max-h-screen 设置主 div 以适应页面

下部容器上的flex-1 将增长并消耗剩余的空间，即 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>

【讨论】：

你是我的官方英雄。非常感谢！

很高兴我能帮上忙。 @亚历克斯