高度为100%的div未展开以匹配父div

Question

我是CSS/JS的新手，所以这可能是一个简单的问题，但我已经为此挣扎了几个小时(尝试CSS类的不同组合等(

我目前有以下配置(使用顺风CSS(：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="main relative pb-10 min-h-screen">
<!-- Takes entire height of screen -->
<div class="p-3 min-h-full">
<!-- Has minimal ht (not matching parent)  -->
<div class="h-full">
<div class="h-full">
<textarea class="resize-none border-rounded-md min-w-full h-full">
Lorem ipsum dolor sit amet
</textarea>
</div>
</div>
</div>
</div>

我希望文本区域(和父div(与父div匹配并占据整个高度。我还尝试添加CSS以使HTML具有最大高度，但它没有起到任何作用。这是react教程中的代码，我自己做了一些修改。第一个父div之后的每个div都有最小的高度，所以问题似乎在第一个和第二个div之间。

/* Tailwind CSS */
.min-h-screen {
min-height: 100vh;
}
.min-h-full {
min-height: 100%;
}
.h-full {
height: 100%;
}

Answer 1

height: 100%仅在显式设置父元素的高度(如height: 400px(时执行您希望它执行的操作。我认为这是因为视口高度可以随着浏览器大小的调整而改变，并且必须进行大量的重新计算才能实现。如果他们现在改变了它，因为计算机更强大了，它可能会破坏很多网站，所以我们只能使用它

现代CSS填充父对象高度的方法是使用Flexbox。

Answer 2

第一个div缺少一对引号<div class = "relative pb-10 min-h-screen">。不确定是什么导致了这个问题。