How to fill the height of the viewport with tailwind css

Question

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?

score 88 · Answer 1 · edited Jan 08 '19 at 13:54

88

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

edited Jan 08 '19 at 13:54

Ced

1,293
5
23
34

answered Apr 24 '18 at 05:03

Nitin Jadhav

6,495
1
46
48

5

You are wrong to obtain `height:100vh;`you must use `h-screen` instead of `h-full` – Ced Jan 08 '19 at 10:14
1

@ced correct, that was a mistake on my side! Thanks – Nitin Jadhav Jan 08 '19 at 13:53
4

I think it's valid to note that `.h-full` will only work if the parent's element height is defined. Like: `

This will do the work

` By not defining the height, this will not work: `

This will NOT do the work

` – AKOP Jul 16 '19 at 16:23
@AleksandrKopelevich I think 100vh = 100 viewport height. It has nothing to do with parent height. – Nitin Jadhav Jul 17 '19 at 03:35
@NitinJadhav Sure. I was talking about the case using h-full, instead of h-screen. Was a bit off topic though, I must admit. – AKOP Jul 17 '19 at 09:28
@AleksandrKopelevich got it now, no problem – Nitin Jadhav Jul 17 '19 at 09:47

gosentetsu · Answer 2 · 2021-08-27T07:30:23.540

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

score 17 · Answer 3 · edited Jul 12 '20 at 11:51

17

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

edited Jul 12 '20 at 11:51

UkFLSUI

5,509
6
32
47

answered Mar 29 '20 at 12:14

Sulaiman Abiodun

466
4
6

8

Surely you meant `h-screen`? – zehata Mar 29 '20 at 12:52

score 11 · Answer 4 · answered Apr 11 '22 at 11:01

11

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>

answered Apr 11 '22 at 11:01

Jonathan Morales Vélez

3,030
2
30
43

Perfect! Came here for the same. :D – Gogol Jun 12 '22 at 18:58

Simone Celli · Answer 5 · 2021-08-04T13:10:24.093

7

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.

edited Aug 04 '21 at 13:10

answered Aug 03 '21 at 14:05

Simone Celli

147
2
5

.min-h-screen exactly looking this, like when the console opened the h-screen not worked well – karthickeyan Aug 15 '21 at 18:18

score 4 · Answer 6 · answered Aug 02 '21 at 15:00

4

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

answered Aug 02 '21 at 15:00

Foysal imran

111
1
11

score 1 · Answer 7 · answered Dec 21 '17 at 13:47

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

score 1 · Answer 8 · answered Aug 04 '23 at 07:42

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>

score 0 · Answer 9 · answered Aug 03 '23 at 11:00

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.

How to fill the height of the viewport with tailwind css

9 Answers9