css - 如何定位一个元素以使用屏幕的剩余空间而不溢出它 [TailwindCSS]

Question

我正在使用 TailwindCSS - 实用程序类框架 - 为我的元素设置样式。尽管这更像是一个通用的 CSS 问题。

我无法定位盒子，所以它可以在不溢出的情况下获得剩余空间。这是我的真实状态:

<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

.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