Question 291759 in Html Question posted in
Some basic documentation can be found here.

Html – How to make a scroll content in between the header and footer

<div class="flex h-screen w-full flex-col">
  <header class="h-64 bg-cyan-300">
    <h1>I'm header</h1>
  </header>
  <div id="pageContent" class="flex flex-1 flex-col overflow-auto bg-green-400">
    <div id="content" class="h-[calc(100%-50px)] overflow-auto">
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
    </div>
    <div id="pagination" class="flex h-[50px] w-full items-center justify-center bg-purple-300">Pagination</div>
  </div>
</div>

https://play.tailwindcss.com/

I need pageContent to be scrollable, not sure if this is right.
example

The above code is worked as expected, my problem is the second overflow-auto is added but why there is no second scrollbar y-axis.

Is there a more proper way to do this?

Tags:

2

Answers


  1. 0

    Make your header and pagination position fixed and width: 100%.
    For header add top:0
    For pagination add bottom: 0

    Login or Signup to reply.
  2. 0

    Here’s what achieves it:

    <div class="flex h-screen w-full flex-col">
  <header class="grow-0">
    header
  </header>
  <main class="grow-1 overflow-y-auto">
    content
  </main>
  <footer class="grow-0">
    Footer
  </footer>
</div>

    It can also be achieved with flex: grid on container, using the same logic. The important bits are:

    • height: 100vh on parent – hard height, required for overflow to work
    • display: flex; flex-direction: column; width: 100% on parent with flex-grow: 0 on header and footer + flex-grow: 1 on content
    • overflow-y: auto on content.

    That’s it. What’s valuable about this solution is that it allows content to overflow without having to hard-code heights on either header or footer. They can vary in height and the content adjusts.

    Demo.

    Notes:

    • footer has to be taken out of content (so the container has 3 children: header, content and footer)
    • this only works with what is called a "hard" height (something that’s actually translated into units) on container or one of its parents.
      For example, if you wanted this to take the full height of a parent element – and give it height: 100%, it would only work if one element in the chain of parents had a "hard" height (in px, em, vh, etc…). Without it, the overflow-y: auto has no effect, as there’s no set height at which the overflow should start.
    • special care should be taken on particularly short viewports, to avoid accessibility problems. If the sum of heights of header and footer is equal or bigger than the viewport height, the content will no longer be accessible. To make sure it’s always accessible, you might want to wrap everything in a @media (min-height: Npx) (in tailwind you’d need to hard-code a min height on the container min-h-[Npx], where Npx is the viewport height at which you’d rather prefer the pagination to go out of the viewport than to shrink the content further).
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search