-1

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

当前状态的结束

这是我想要的输出：

期望的输出

提前致谢。

小提琴

关联。

4

2 回答 2

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

于 2019-05-17T07:44:28.557 回答
-2

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

于 2019-05-16T16:41:05.270 回答