Fill the full height of the screen in TailwindCSS
Question:
How to fill the full height of the screen in TailwindCSS? Answer:
<div class="bg-teal-200 h-screen">
<h1>Lorem ipsum</h1>
</div>
Description:
By default, the height of a div
container will be the height needed for the internal content. Even setting the height
to 100%
and the flex-grow
property in the case of a flex
container does not change this:
<div class="bg-teal-200 flex flex-grow h-full">
<h1>This doesn't work</h1>
</div>
The result is not what we want:
The solution is to set the height to 100% of the viewport using the h-screen
class:
<div class="bg-teal-200 h-screen">
<h1>Real 100% height</h1>
</div>
Where the result looks like this:
Reference:
TailwindCSS viewport reference
Share "How to fill the full height of the screen in TailwindCSS?"
Related snippets:
- Create blinking background with TailwindCSS
- Create a neon effect with TailwindCSS
- Rotate element with TailwindCSS
- Change SVG icon color with TailwindCSS
- Using :not in TailwindCSS
- Specify exact width value in TailwindCSS
- Set element width over 100% using Tailwind CSS
- Stretch children to fill horizontally
- Create a fixed navbar with TailwindCSS
- Use font from local files in TailwindCSS
- Make an element invisible in mobile size in Tailwind CSS
- Create a 20/80 grid with Tailwind CSS
- Select the nth child in TailwindCSS
- Add class to child when hovering on parent in TailwindCSS
- Fill the full height of the screen in TailwindCSS
- Create transition with TailwindCSS
- Create horizontal rule with text using TailwindCSS
- Set background image with TailwindCSS
- How to use CSS variables in TailwindCSS
- Center an absolute element in TailwindCSS
- Remove arrows from number input in TailwindCSS
- How to use !important in TailwindCSS
- Select first child in TailwindCSS
- Access child elements in TailwindCSS
- Create semi transparent background in TailwindCSS
- How to use calc() in TailwindCSS
- Add text shadow with Tailwind CSS
Tags:
fill, full, entire, 100%, height, viewport, tailwind Technical term:
Fill the full height of the screen in TailwindCSS