Pancake Stack CSS

main.md

这里只讨论流式文档布局。

calc()

适用：其余元素高度已知。

不适用：有任何高度不定动态内容。

<div id="body" class="h-full text-white">
  <header class="h-6 bg-slate-700">标题</header>
  <!-- 类名里不能有空格，故代以 `_` -->
  <main class="h-[calc(100%_-_3rem)] bg-emerald-500">主体</main>
  <footer class="h-6 bg-slate-700">页脚</footer>
</div>

Try It Yourself on Tailwind Playground

flex

适用各种情况。

缺点：flex 盒子得层层嵌套。

<div id="body" class="flex h-full flex-col text-white">
  <header class="bg-slate-700">标题</header>
  <!-- 多层嵌套时，`flex flex-col flex-auto` 要层层传递 -->
  <main class="flex flex-auto flex-col bg-slate-600">
    占位符
    <div id="inner" class="flex-auto bg-emerald-500">
      <p>主体</p>
    </div>
  </main>
  <footer class="bg-slate-700">页脚</footer>
</div>

TIY on Tailwind Playground

grid

.parent{
  grid-template-rows: auto 1fr auto;
}

来源：1-Line Layouts*

TIY on CodePen

然而速记符在 Tailwind CSS 里就再也不是速记了……