CODEWITHSUNDEEP
csstailwind-css
jmunozco
jmunozco

Reputation: 695

In Tailwind, how to set height of a div to 80% of the screen?

I have an overflow div in y axis and want it to be exactly the 80% of the height of the screen. Now I have this <div class="overflow-y-auto h-96"> which works but the height must be bigger than 96, exactly 80% of the whole screen (to leave space for header and footer).

Using h-4/5 seems not to work.

    <div class="h-4/5 bg-yellow-200 overflow-hidden">
        <div class="overflow-y-auto bg-yellow-500 space-y-3">
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            <div class="bg-blue-300 h-48">
            </div>
            </div>
        </div>
    </div>

Update: I got this (also available here https://play.tailwindcss.com/NlZdzWfkyD) but if I uncomment the topbar it fails, please, any idea?

<div class="h-screen">
  <div class="h-full">
    <!--<div class="bg-blue-400 py-3">topbar</div>-->

    <div class="pl-6 pr-16 pt-12 h-full">
      <div class="h-full border border-gray-200 rounded-t-xl px-20 pt-3 flex flex-col">
        <div class="h-1/2 bg-red-100"></div>
        <div class="h-1/2">
          <div class="flex flex-col h-full">
            <div class="bg-yellow-200 overflow-hidden">
              <div class="overflow-y-auto bg-blue-500 space-y-3 h-full">
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
                <div class="bg-blue-300 h-48"></div>
              </div>
            </div>

            <div class="h-20"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 21

Views: 23254

Answers (3)

Md Mehedi Hasan
Md Mehedi Hasan

Reputation: 1

h-[600px]- you can set as px format.

Upvotes: -1

Amir Danish
Amir Danish

Reputation: 444

Tested with tailwindcss V3.3.3: You can do h-[80%], h-[xx%] which set the height or w-[xx%] set the Width of the element.

Also we have h-3/6 <- height: 50%; h-x/x or w-3/6<-width: 50%; w-x/x

Upvotes: 0

superdave
superdave

Reputation: 2268

You can do h-[80vh], which would set the height to 80% of the screen height.

Upvotes: 47

Related Questions