如何定位元素以使用屏幕的剩余 space 而不会溢出 [TailwindCSS]

Question

我正在使用 TailwindCSS - 一个实用程序 class 框架 - 来设计我的元素。虽然这是一个更通用的 CSS 问题。

我无法定位方框，所以这会得到剩余的 space 而不会溢出它。这是我的真实状态：

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

输出（省略部分内部元素）：

如您所见，显示滚动条是因为 div 太大了。为了看到盒子的底部，我必须向下滚动：

这是我想要的输出：

提前致谢。

Fiddle

Link.

Answer 1

您正在使用 class h-screen，其中 height: 100vh; 从 div 中删除了 class。

Answer 2

class.h-screen为100vh。 .mb-8 有一个 margin-bottom:2rem。所以高度是100vh + 2rem。您可以使用 [calc][1] 从高度中减去边距。

.h-screen{
  height:calc(100vh - 2rem)!important;
}

https://jsfiddle.net/c28145au/

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

如何定位元素以使用屏幕的剩余 space 而不会溢出 [TailwindCSS]

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

css

styles

tailwind-css

Fiddle