自动拉伸顺风体以适应其他div答案

【问题标题】：Auto-stretch tailwind body to adapt to other div自动拉伸顺风体以适应其他div
【发布时间】：2021-09-21 14:48:29
【问题描述】：

我在 VueJS 中使用 Tailwind CSS，但我的 DIV 有点问题。我不习惯 CSS 框架，之前从未遇到过这个问题。

问题：https://i.ibb.co/XWbdsxT/screenshot.png 正如您在此屏幕截图中看到的，红色 div 超出了页面底部（这是正常的）。我希望深灰色的和浅灰色的可以伸展并跟随红色到最底部。

我试过了：

将 h-full 或/和 h-screen 类添加到灰色 div 将 h-full 或和 h-screen 类添加到 body 和/或 html 将这些类添加到主父 div（包裹灰色的那个）

好像没什么效果。我做错了吗？这是代码：

<template>
  <div class="hello">
    <div class="flex flex-row">
      <div class="w-1/5 h-screen bg-darkgray"></div>
      <div class="w-4/5 h-screen bg-gray-200">
        <div class="w-full h-16">
          <div>
            <div class="bg-white flex items-center shadow-xl">
              <input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article">
              <div class="p-4 flex flex-column">
                <div class="border-r-2 w-16">
                  <button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
                    <img src="../assets/search_icon.png"/>
                  </button>
                </div>
                <div class="flex flex-column">
                  <button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
                    <img src="../assets/notifications.png"/>
                  </button>
                  <button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
                    <img src="../assets/user.png"/>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="flex flex-row w-11/12 h-16 mt-20 m-auto justify-between">
            <p class="text-3xl font-bold">Dashboard</p>
            <button class="bg-orange hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button">
              <span class="mr-2">+</span> Create an article
            </button>
          </div>
          <div class="flex flex-row w-11/12 h-16 mt-4 m-auto bg-white rounded-t-2xl justify-between">
            <div class="ml-6 mt-5">
              <a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
            </div>
            <div class="flex justify-end ml-6 mt-5 mr-6 space-x-4">
              <div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
              <div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
              <div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
            </div>
          </div>
          <div class="flex w-11/12 h-5xl mt-0.5 bg-red-500 m-auto rounded-b-2xl"></div>
        </div>
      </div>
    </div>
  </div>
</template>

请不要注意这是没有响应的事实。它不应该是。

【问题讨论】：

标签： tailwind-css

【解决方案1】：

试试这个，

需要您的Dashboard 内容区域overflow:hidden。检查这个doc

<div class="flex flex-row w-full h-screen">
  <div class="w-1/5 max-h-full bg-gray-800 text-white p-6">Sidebar</div>
  <div class="flex flex-col w-full max-h-full bg-gray-200">
    <div class="flex flex-row w-full bg-white items-center shadow-xl">
      <input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article" />
      <div class="flex p-4 flex-column">
        <div class="border-r-2 w-16">
          <button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
            <img src="../assets/search_icon.png" />
          </button>
        </div>
        <div class="flex flex-column">
          <button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
            <img src="../assets/notifications.png" />
          </button>
          <button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
            <img src="../assets/user.png" />
          </button>
        </div>
      </div>
    </div>
    <div class="flex flex-col max-w-full m-6 h-full rounded-b-2xl overflow-hidden">
      <div class="flex flex-row w-full my-6 m-auto justify-between">
        <p class="text-3xl font-bold">Dashboard</p>
        <button class="bg-yellow-500 hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button"><span class="mr-2">+</span> Create an article</button>
      </div>
      <div class="flex flex-row w-full bg-white rounded-t-2xl justify-between px-6 py-6 h-16">
        <a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
        <div class="flex justify-end space-x-4">
          <div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
          <div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
          <div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
        </div>
      </div>
      <div class="flex w-full mt-0.5 bg-red-500 rounded-b-2xl max-h-full p-6">Test Doc</div>
    </div>
  </div>
</div>

查看Tailwind Play

【讨论】：