html - 网格内的绝对项目没有根据需要采取全高

Question

在这段代码中你可以看到一个white box设置为全高但它没有全尺寸只有最高的盒子是全高有没有办法让它全高所有白色absolute boxes我被严重卡住了任何帮助都是非常明显的

我希望所有白框都保持全高，这样我就可以将红色圆圈居中，但我不知道为什么这些框的高度不同，尽管我已经为每个我使用顺风的人指定了船体高度，但我不知道是顺风问题还是 css3 网格

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="grid grid-cols-3 gap-5">
  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 border-2 bg-white h-full right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>

  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 h-full border-2 bg-white right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>

  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 border-2 h-full bg-white right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>
</div>

标签： htmlcsstailwind-css

Answer 1

只需添加.relative {height: 100%;}

.relative {height: 100%;}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="grid grid-cols-3 gap-5">
  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 border-2 bg-white h-full right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>

  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 h-full border-2 bg-white right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>

  <div class="border-b-8 border-green-600 bg-blue-300">
    <div class="relative" style="min-height:150px;">
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>
      <p>jaiosfjiowjeiowajefoiajwe</p>

      <div class="wrapp absolute z-10 border-2 h-full bg-white right-0 top-0 flex items-center -mr-12">
        <svg class="" height="100" width="100">
          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
          Sorry, your browser does not support inline SVG.
        </svg>
      </div>
    </div>
  </div>
</div>