时间戳

首页 > 解决方案 > 高度为 100% 的 div 未扩展以匹配父 div

css - 高度为 100% 的 div 未扩展以匹配父 div

问题描述

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

我目前有以下配置（使用 Tailwind 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 具有最大高度，但它什么也没做。这是来自我自己的一些修改的反应教程的代码。第一个之后的每个 div，父 div 的高度最小，所以问题似乎在第一个和第二个 div 之间。

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

.min-h-full {
  min-height: 100%;
}

.h-full {
  height: 100%;
}

标签： css

解决方案

如果显式设置了父元素的height: 100%高度，则唯一会执行您希望它执行的操作，例如height: 400px. 我认为这是因为视口高度会随着浏览器大小的调整而改变，并且它必须进行大量的重新计算才能使其工作。如果他们现在改变它，因为计算机更强大，它可能会破坏一堆网站，所以我们坚持下去。

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

推荐阅读