Search code examples
cssstylestailwind-css

How to position an element to use the remaining space of the screen without overflowing it [TailwindCSS]

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):

Actual state

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:

End of current state

This is my desired output:

Desired output

Thanks in advance.

Fiddle

Link.

Solution

  • 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