而不是 h-full 有一个函数可以使它 h-section 满

Posted 2023-03-07

【中文标题】而不是 h-full 有一个函数可以使它 h-section 满

【英文标题】：Instead of h-full is there a function to make it h- section full

【发布时间】：2021-09-02 06:55:09

【问题描述】：

我正在尝试编写一个使用顺风动画功能弹跳的滚动元素。但是反弹大小太大了，因为我将容器设置为h-full。有没有办法让容器跨越<section> 的大小而不是整个页面？或者能够以一种反应性的方式限制容器的大小。

ps。我正在使用容器功能来帮助将 flex 对齐到页面的中心

  <div class="container h-screen animate-bounce w-screen flex justify-center object-center">
    <div class="scroll flex-column absolute z-10 object-center">
      <h2 class="text-yellow-500 text-xs uppercase m-auto">scroll</h2>
      <img src="~/static/group-3.png" class="Scroll-Arrow m-auto">
    </div>
  </div>

【问题讨论】：

你想要这个高度在哪个元素上？

@BoussadjraBrahim 容器元素

你的问题不清楚

【参考方案1】：

试试这个示例，

<div class="container h-40 mt-10 animate-bounce w-screen flex justify-center object-center"> <--first div
  <div class="scroll flex-col absolute z-10 object-center"> <--second div
    <h2 class="text-yellow-500 text-xs uppercase m-auto">scroll</h2>
    <img src="~/static/group-3.png" class="h-20 scroll-arrow m-auto" />
  </div>
</div>

Container 只是定义 width 和 max-width 而不是 height

您可以通过提供h-x 值来调整您的目标height 值。

快乐编码 ;)