Nuxt应用中使用Tailwind实现可变高度div等高及外边距失效问题解决

问题原因 #

• 首先你的grid容器标签写法错误，<div class="grid grid-cols-3"/> 属于自闭合标签，浏览器会判定该容器直接结束，后续三个Item元素根本不属于grid的子元素，布局规则自然不会生效。
• 你给ItemB添加了h-full，Grid布局默认align-items: stretch，同一行子项默认就会自动撑到和最高子项等高，额外加h-full会让元素高度直接撑满网格单元格，底部margin会溢出网格行的可视范围，视觉上就像没生效。
• 给Grid子元素加垂直margin本身容易出现margin溢出、塌陷问题，不推荐这种写法。

解决方法 #

Grid布局的间距统一用容器的gap系列属性控制，同时利用默认的拉伸特性就能实现高度自动同步，修正后代码如下：

<div class="grid grid-cols-3 gap-y-4">
  <div>Item A</div>
  <div>Item A</div>
  <div>Item B</div>     
</div>

如果ItemB内容过多需要做溢出滚动，只需要给ItemB加溢出规则即可：

<div class="grid grid-cols-3 gap-y-4">
  <div>Item A<br>多行内容<br>动态撑开高度</div>
  <div>Item A</div>
  <div class="overflow-y-auto">
    Item B 超出高度的内容会自动滚动，整体高度始终和ItemA保持一致
  </div>     
</div>

gap-y-4的效果和你之前给每个子项加mb-4的效果完全一致，不会出现间距失效的问题。

内容的提问来源于stack exchange，提问作者Maxime