'How to fill the height of the viewport with tailwind css

I'm just trying out Tailwind CSS and want to know how to fill the height of the viewport.

Taking this example HTML from the docs

<div class="flex items-stretch bg-grey-lighter">
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

How do I make it stretch to the bottom of the screen?

cssflexboxtailwind-css


Solution 1:[1]

There is a tailwind class named .h-screen that translates to height:100vh; css. This should work as well. For further details please refer to the Official Tailwind documentation

Solution 2:[2]

You can add min-h-screen to the parent <div>, this would fill the height of the viewpoint.

And the difference with h-screen is that this will stretch over the screen. It would be helpful when the screen is tiny and the content is overflowing with a scrollbar. In this situation the background will not fill the rest of the scrolled-up part.

 <div class="flex items-stretch bg-grey-lighter min-h-screen">
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
    <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

Link to some snippets at tailwind play (added a background color example to clarify it): https://play.tailwindcss.com/8Qd822yY4w

Solution 3:[3]

You can use .h-screen class of Tailwind CSS.

Solution 4:[4]

I know it's an old post, but I found it now, while I was trying to have the background color streched to the size of the screen when the content was too little to fill it and avoid to have the background color to stop suddenly when the content was more of the size of the screen (that happens with h-screen). I solved the problem using min-h-screen.

Solution 5:[5]

You may use h-screen class in your main div. Check out more here

Solution 6:[6]

I'm using NextJS + tailwindcss. NextJS adds a <div id="__next">, so this is what I have in my global.css

@tailwind base;
@tailwind components;
@tailwind utilities;
html {
  @apply h-full;
}
body {
  @apply h-full;
}
div#__next {
  @apply h-full;
}
main {
  @apply h-full;
}

And in my page I have

<main className="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
  ...
</main>

Solution 7:[7]

When the content of the body is too little to fill the whole screen, I would use flexbox to vertically stretch the smaller divs evenly.

Make sure body and the parent div have 100% height, and use flex box as columns and add flex-basis to spread vertically and evenly.

html, body {height: 100%;}

.flex {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.flex-1 {
/* or flex-grow: 1; */
flex-basis: 33.33%;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ced
Solution 2
Solution 3 UkFLSUI
Solution 4
Solution 5 Foysal imran
Solution 6 Jonathan Morales Vélez
Solution 7 yinkouya

Related Questions