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

Posted 2023-03-07

【中文标题】如何定位元素以使用屏幕的剩余空间而不溢出它[TailwindCSS]

【英文标题】：How to position an element to use the remaining space of the screen without overflowing it [TailwindCSS]

【发布时间】：2019-10-03 23:53:20

【问题描述】：

我正在使用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 太大。为了看到盒子的两个部分，我必须向下滚动：

这是我想要的输出：

提前致谢。

---

小提琴

Link.

【参考方案1】：

您正在使用具有height: 100vh; 的类 h-screen 从 div 中删除该类。

【讨论】：

结果是一样的：/

你有链接吗？还是jsfiddle？

哦，是的，我没有想到这一点。我现在添加它（这是顺便说一句：link）

将overflow: hidden; 添加到正文标签。

这并不能解决问题，只是隐藏滚动条。

【参考方案2】：

.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