CODEWITHSUNDEEP
cssflexboxtailwind-css
bencarter78
bencarter78

Reputation: 3895

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?

Upvotes: 86

Views: 244990

Answers (10)

Wassim BENROMDHANE
Wassim BENROMDHANE

Reputation: 51

The solution for filling the height of the viewport with Tailwind CSS is to use the h-screen class.

If you have a specific section you want to adjust within the viewport, you can further customize it using the h-[calc(100vh_-_150px)] class, adjusting the height accordingly.

Upvotes: 1

user2210411
user2210411

Reputation: 1727

For mobile, anything related to "h-screen" is going to cause problems because it sets the style to

height: 100vh

On mobile, the entire screen is seen as 100vh, meaning that your content would overflow the screen. This is due to the dynamic toolbars which are unique to every device. I would recommend you manually setting the height to 100svh to ensure that your content is always rendered correctly regardless of whether you view it on mobile or desktop. To my knowledge, Tailwindcss does not have an option for dynamic view port (yet).

<div style="height: 100svh" 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>

Upvotes: 3

Mr_Pouet
Mr_Pouet

Reputation: 4280

Since I figured I might not be the only person here trying to make a full-screen div with a translucent background color... here's an explicit way to do so:

<div className='bg-black bg-opacity-80 h-screen w-screen top-0 left-0 fixed'></div>

You can also optionally add z-10 if a z-index is relevant to your use case.

Upvotes: 2

Jonathan Morales V&#233;lez
Jonathan Morales V&#233;lez

Reputation: 3646

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>

Upvotes: 17

gosentetsu
gosentetsu

Reputation: 589

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

Upvotes: 40

Simone Celli
Simone Celli

Reputation: 167

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.

Upvotes: 9

Foysal imran
Foysal imran

Reputation: 133

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

Upvotes: 4

Sulaiman Abiodun
Sulaiman Abiodun

Reputation: 506

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

Upvotes: 20

Nitin Jadhav
Nitin Jadhav

Reputation: 7296

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

Upvotes: 116

yinkouya
yinkouya

Reputation: 93

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%;
}

Upvotes: 1

Related Questions