1

I have made a sandbox example of what I need: https://codesandbox.io/s/vue-tailwind-css-template-forked-7uhkgl?file=/src/App.vue

<div class="flex h-screen flex-col">
  <header class="sticky top-0 h-12 w-full bg-white">header</header>
  <main class="h-screen overflow-scroll bg-blue-200 p-4">
    <div class="h-full rounded-xl bg-green-200 p-4">
      <p class="h-full overflow-scroll rounded-xl p-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa dicta quasi, fugit aperiam quis laudantium dolorem libero mollitia provident maxime odio. Sint dolore libero magnam atque dolorem ex pariatur voluptatum. Alias eos amet quis, nostrum explicabo excepturi, odio perspiciatis omnis sunt mollitia reiciendis ut ipsa doloremque! Ut, rem fugiat impedit, iusto, nam repellat labore aspernatur vero ad ducimus numquam veritatis. Tenetur iure voluptatem sint quo ut qui rerum pariatur officiis exercitationem? Harum exercitationem suscipit hic soluta deleniti doloremque ullam temporibus quis, magnam rerum velit laudantium illum quidem animi blanditiis ducimus. Aliquam excepturi dolores temporibus ducimus voluptatem ullam maiores nihil adipisci quo debitis! Quo, atque voluptatibus laboriosam minus nulla hic rerum, eaque dicta modi quidem beatae officia, temporibus eligendi fugiat animi. Nihil quos, sed fugiat sunt vel suscipit similique libero aut deleniti at soluta rem iure dolores sapiente tempore iste accusantium, impedit quisquam molestiae eos asperiores cumque tenetur eveniet ullam? Aut. Distinctio alias nemo fugiat explicabo eaque tenetur unde maxime laborum reiciendis voluptas maiores incidunt dolorum expedita, dolore hic consequuntur provident laudantium porro? Quas unde dolorem, quidem numquam quis vero quam. Ex quibusdam labore voluptatum rerum obcaecati! Sed unde incidunt, laudantium animi pariatur accusamus laboriosam dolores vero aliquam alias quis eos sapiente distinctio deleniti quidem modi ipsam? Illo voluptatibus fugit ducimus! Eius adipisci laborum eum tenetur. Explicabo animi temporibus neque doloremque laboriosam assumenda maxime, veritatis autem? Odio consequuntur quasi dignissimos accusamus, fuga temporibus labore architecto esse sed fugiat asperiores sapiente. Vel! Dicta veniam tempore consequuntur, aliquam ratione, quidem eaque id aspernatur quis voluptatum voluptas a in quibusdam voluptate quaerat sequi saepe animi accusantium nihil optio, porro esse. Officia eius quaerat officiis. Architecto aliquid, et vero tempore consequuntur deleniti reprehenderit expedita voluptatum totam ipsam similique praesentium numquam? Molestiae itaque, nobis harum, dolores quibusdam mollitia ex labore in magni sit, iure quo necessitatibus. Architecto fugiat, eius labore natus commodi nostrum ipsam, sequi nobis possimus ducimus ipsa? Expedita vero doloremque tenetur dolore ipsum at ea eligendi quos incidunt ut quibusdam eveniet nostrum, fuga optio? Libero cum a repellendus tempora facere aliquam animi ipsam perferendis nostrum! Quidem ducimus eaque fugit culpa accusantium, temporibus harum soluta hic quae maxime tempore eos, sed magni veniam atque est! Error obcaecati quasi sequi explicabo quas magni fugit possimus, temporibus animi nemo minima. Accusamus illum enim, fuga odit reprehenderit dolore, inventore nisi amet aperiam molestiae eaque maxime voluptates asperiores voluptas. Laboriosam sint ducimus tempora reprehenderit neque corrupti consectetur et possimus esse quas dicta maxime quis autem cupiditate, quaerat doloribus doloremque aliquid quae alias iusto, quisquam natus illo eum mollitia. Nihil! Aspernatur natus velit delectus eaque dolore cupiditate ipsa doloribus atque voluptatem iure sequi inventore odio vitae at, dolorem dolor quo quibusdam quod voluptatibus quas molestiae tenetur? Illum minus corporis incidunt. Fuga, nam unde. Magni nobis similique minus, quae itaque reprehenderit nulla ex suscipit voluptate quos distinctio, est placeat accusamus blanditiis cumque labore, soluta impedit. In aliquam consequatur exercitationem provident rerum? Voluptatem repudiandae magnam sed nulla cupiditate corporis debitis at fuga similique inventore impedit quae alias, dolores error dicta, iure ipsam velit. Tempora eaque deleniti at nam ad obcaecati fugit ullam? Minus aut soluta neque quod sunt suscipit tempora! Nulla quisquam dolorem assumenda dolor optio ratione aperiam sunt iste blanditiis. Ex minus, enim nulla voluptatum veniam animi amet qui deserunt sequi. Praesentium in ratione qui animi deleniti, id similique fugit quas veniam ipsam iusto nemo! Corporis consequuntur, autem nisi quasi facilis saepe reiciendis nesciunt qui facere laudantium, in, eos ad voluptatum! Aliquid laudantium, ab debitis atque praesentium quia quaerat alias, quo repellat et obcaecati dolore assumenda aperiam? Facere tempora autem deserunt nam, at nihil rem, eius quis adipisci eligendi, esse consectetur!</p>
    </div>
  </main>
  <footer class="sticky bottom-0 h-12 w-full bg-white">footer</footer>
</div>

Everything is fine until I try this on real mobile device, then the main content is a bit cropped and it is not what I want.

This is what I got:

enter image description here

My project is in Vue3.

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
Alexis K
  • 13
  • 5
  • 1
    In the example you linked the paragraphs do not have `h-full overflow-scroll`. What's the purpose of adding those classes? It looks like a mistake. Does [this](https://play.tailwindcss.com/uwhBXtNY4P) work as expected? – tao Jul 20 '22 at 13:16
  • No because I need the green container to be like 100vh minus header & footer and be scrollable. – Alexis K Jul 20 '22 at 13:23
  • `h-full` is not `100vh`. It's [`height: 100%;`](https://tailwindcss.com/docs/height). I strongly advise against double scrollbar, since it's generally regarded as sub-par UX. That being said, you'll need to define your own class and deduct parent paddings, header height and footer height from `100vh`, using [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc). Best of luck! – tao Jul 20 '22 at 13:29
  • Maybe I did it wrong but I don't want double scrollbar. I need fixed header/footer and a main container that has 100vh minus header/footer that can be scrolled for its content. Everything I did until now is working fine on desk but not on mobile... – Alexis K Jul 20 '22 at 13:44
  • I just saw that my playground link was completely wrong, I've updated post with a codesandbox link – Alexis K Jul 20 '22 at 13:52

1 Answers1

0

If you are using flex-col, you don't need to use sticky or absolute positioning for your header and footer. They just need to be stacked inside the flex and your content section set to flex-1 to take up all of the available remaining vertical space. adding overflow-hidden on <main> and moving the scrollbar into the green container should fix the scrollbar issue. For example:

<template>
  <div class="flex h-screen flex-col">
    <header class="h-12 w-full bg-white">header</header>
    <main class="flex-1 bg-blue-200 p-4 overflow-hidden">
      <div class="h-full rounded-xl bg-green-200 p-4 overflow-y-scroll ">
        <p class="h-full rounded-xl p-4">
          ...
        </p>
      </div>
    </main>
    <footer class="h-12 w-full bg-white">footer</footer>
  </div>
</template>

This removes the h-space from your content wrapper which will hopefully resolve the issue you are seeing on mobile devices.

Also, replacing overflow-scroll with overflow-y-scroll will get rid of the internal horizontal scrollbar.

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
  • Hey thanks for the answer but it still doesn't fit my needs in mobile which has double scroll. That thing is a real pain tbh – Alexis K Jul 21 '22 at 07:26
  • Are you trying to eliminate the inner scrollbars or the outer one? – Ed Lucas Jul 21 '22 at 14:31
  • I only need the inner scrollbar, the one in the green container – Alexis K Jul 24 '22 at 11:59
  • Gotcha. I've edited the code above to reflect that. – Ed Lucas Jul 25 '22 at 23:02
  • Still the same issue on chrome mobile (I'm on iOS). The vertical 100vh doesn't take the bottom navigation bar in consideration so there's a vertical scroll in the main container. – Alexis K Jul 26 '22 at 07:31
  • In that case, you can use the markup I provided and try one of these solutions to the iOS 100vh issue: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser – Ed Lucas Jul 26 '22 at 12:53