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?
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
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
You can use .h-screen class of Tailwind CSS.
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.
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>
You may use h-screen class in your main div. Check out more here
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%;
}
Related
I have this layout:
This is the code for the image below:
<main>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
</main>
What I want is to have two divs, one of the left and one on the right of this layout (in the white area) that take up the remaining space without affecting the width of the main content area. How can this be done?
I've experimented with this code, but I haven't figured it out yet:
<main className="flex">
<div className="">left white area</div>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
<div className="">right white area</div>
</main>
UPDATE:
I was able to get the desired behaviour with media queries, even though I wanted to do this with native tailwind, this works as well:
--HTML--
<main className="flex">
<div id="left" className="hidden">left white area</div>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
<div id="right" className="hidden">right white area</div>
</main>
--CSS--
#media screen and (min-width: 64rem) {
#left,
#right {
width: calc((100vw - 64rem) / 2);
display: block;
}
}
I'll leave this thread open for any possible other solutions. If it can be figured out with just tailwind that's even better.
Edited again to clean up the code a bit.
I think you want flex-1 or flex-grow in the middle one, and instead of media queries for the side ones try hidden md:block and possibly something like w-1/5
I'm wondering how can I remove background color from an existing div for a specific xl screen size? I want something like this background-color:unset, is this possible with tailwind.css?
<div class="fixed bottom-0 bg-baseorange p-4 left-0 w-full z-10 xl: bg-none xl:absolute lg:absolute xl:bottom-22 xl:right-20 lg:bottom-22 lg:right-20">
</div>
You can use xl:bg-transparent.
In Tailwind, the class bg-transparent sets the css property background-color: transparent;
Tailwind documentation:
https://tailwindcss.com/docs/background-color
Given the classnames "grid grid-cols-5 gap-2 place-items-end"
I get:
Wanted:
Is there a CSS-only way of resolving this ? Having to set a "col-span-4" on the 6h star from js is a bit tedious (considering the number of stars I can get is unknown).
Reversing the second row with direction: rtl; will do the job.
HTML:
<div class="rtl-grid container w-96 bg-red-700 h-auto grid grid-cols-5 gap-4 p-4 -mt-4">
<div class="bg-white h-12"></div>
<div class="bg-white h-12"></div>
</div>
CSS:
.rtl-grid {
direction: rtl;
}
Tailwind Play
I created a component named Header with a simple css class:
<template>
<nav
class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
>
<!-- Etc... -->
</nav>
In Home component I registred Header but it is overlapping the home:
<template>
<div class="container">
<Header />
<div class="flex m-5">
<h3>Hello</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
Header: () => import('#/components/Header.vue')
}
}
</script>
The Hello is behind, even including block class in Home component is not worked. Anyone can helped?
There are may ways you could achieve this, but building on the code you already have, you could:
Add a top-0 class to your header. This will ensure that your header which is now positioned fixed will stick to the top of the viewport.
Add a top padding class equavliant to the height of your header (e.g. pt-16) to your container.
Here's a live demo for your reference.
overlapping component each others because of height of your component and in flex height taking automaticly so remove your height
remove css h-16
I'm using TailwindCSS -a utility class framework- to style my elements. Altough this is more a generic CSS question.
I can't manage to position the box so this gets the remaining space without overflowing it. This is my actual state:
<div class="flex flex-col h-screen mx-8 bg-white rounded p-4 mb-8">
<!-- SUBTITLE -->
<div>
<h2 class="text-lg font-bold text-gray-700 pb-4">Subtitle</h2>
</div>
<div class="relative self-auto mb-8">
<!-- ELEMENTS -->
<a href="#">
<img class="absolute z-10" style="top: 131px; left: 235px;"
src="{{ asset('some.svg') }}">
</a>
</div>
</div>
Output (omitting some of the inside elements):
As you can see, the scrollbar shows because the div is too big. In order to see the bothom of the box I have to scrolldown:
This is my desired output:
Thanks in advance.
Fiddle
Link.
The class .h-screen is 100vh. .mb-8 has an margin-bottom:2rem. So the height is 100vh + 2rem. You can use [calc][1] to subtract the margin from the height.
.h-screen{
height:calc(100vh - 2rem)!important;
}
https://jsfiddle.net/c28145au/
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This is the solution I found: w-[calc(100%_-_10px)]
you are using class h-screen which has height: 100vh; remove that class from the div.