顺风CSS div消失没有内容。建议不要，如何使div更适合屏幕？

Question

​

 function App() {
  return (
    <div>
      <div className="flex flex-col ">
        <div className="bg-blue-400 h-16"></div>
        <div className="flex flex-row items-stretch h-max ">   
          <div className ="basis-3/4 bg-red-600"><Mainscreen/></div>
          <div className= "basis-1/4 bg-black text-white" ><Mainscreen/></div>
        </div>
      </div>

    </div>

  );
}

​

我正在尝试做一个UI，其中有一个顶部的横幅，然后在底部的一个部分，适合最大的屏幕大小，并将滚动与足够的内容。我遇到的问题是，如果没有任何内容，软盘甚至都不会显示。唯一能让它们显示出适当高度的方法是，如果我硬编码高度。

这就是我希望页面看起来的样子，而不用使用h屏幕。

Answer 1

您可以使用h-full。这将允许您占用内容所具有的空间。你可以在下面的例子中看到。

​

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col">
  <div class="h-16 bg-blue-400"></div>
  <div class="flex flex-row items-stretch">
    <div class="h-full basis-3/4 bg-red-200">
      <section class="body-font relative text-gray-600">
        <div class="container mx-auto px-5 py-24">
          <div class="mb-12 flex w-full flex-col text-center">
            <h1 class="title-font mb-4 text-2xl font-medium text-gray-900 sm:text-3xl">Contact Us</h1>
            <p class="mx-auto text-base leading-relaxed lg:w-2/3">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify.</p>
          </div>
          <div class="mx-auto md:w-2/3 lg:w-1/2">
            <div class="-m-2 flex flex-wrap">
              <div class="w-1/2 p-2">
                <div class="relative">
                  <label for="name" class="text-sm leading-7 text-gray-600">Name</label>
                  <input type="text" id="name" name="name" class="w-full rounded border border-gray-300 bg-gray-100 bg-opacity-50 py-1 px-3 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200" />
                </div>
              </div>
              <div class="w-1/2 p-2">
                <div class="relative">
                  <label for="email" class="text-sm leading-7 text-gray-600">Email</label>
                  <input type="email" id="email" name="email" class="w-full rounded border border-gray-300 bg-gray-100 bg-opacity-50 py-1 px-3 text-base leading-8 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200" />
                </div>
              </div>
              <div class="w-full p-2">
                <div class="relative">
                  <label for="message" class="text-sm leading-7 text-gray-600">Message</label>
                  <textarea id="message" name="message" class="h-32 w-full resize-none rounded border border-gray-300 bg-gray-100 bg-opacity-50 py-1 px-3 text-base leading-6 text-gray-700 outline-none transition-colors duration-200 ease-in-out focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200"></textarea>
                </div>
              </div>
              <div class="w-full p-2">
                <button class="mx-auto flex rounded border-0 bg-indigo-500 py-2 px-8 text-lg text-white hover:bg-indigo-600 focus:outline-none">Button</button>
              </div>
              <div class="mt-8 w-full border-t border-gray-200 p-2 pt-8 text-center">
                <a class="text-indigo-500">example@email.com</a>
                <p class="my-5 leading-normal">49 Smith St. <br />Saint Cloud, MN 56301</p>
                <span class="inline-flex">
                  <a class="text-gray-500">
                    <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
                      <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                    </svg>
                  </a>
                  <a class="ml-4 text-gray-500">
                    <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
                      <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
                    </svg>
                  </a>
                  <a class="ml-4 text-gray-500">
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
                      <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                      <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                    </svg>
                  </a>
                  <a class="ml-4 text-gray-500">
                    <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
                    </svg>
                  </a>
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="h-full basis-1/4 bg-black text-white">
      <section class="body-font text-gray-600">
        <div class="container mx-auto flex flex-wrap px-5 py-24">
          <div class="flex w-full flex-wrap">
            <div class="md:w-1/2 md:py-6 md:pr-10 lg:w-2/5">
              <div class="relative flex pb-12">
                <div class="absolute inset-0 flex h-full w-10 items-center justify-center">
                  <div class="pointer-events-none h-full w-1 bg-gray-200"></div>
                </div>
                <div class="relative z-10 inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 text-white">
                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                  </svg>
                </div>
                <div class="flex-grow pl-4">
                  <h2 class="title-font mb-1 text-sm font-medium tracking-wider text-gray-900">STEP 1</h2>
                  <p class="leading-relaxed">VHS cornhole pop-up, try-hard 8-bit iceland helvetica. Kinfolk bespoke try-hard cliche palo santo offal.</p>
                </div>
              </div>
              <div class="relative flex pb-12">
                <div class="absolute inset-0 flex h-full w-10 items-center justify-center">
                  <div class="pointer-events-none h-full w-1 bg-gray-200"></div>
                </div>
                <div class="relative z-10 inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-indigo-500 text-white">
                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-5 w-5" viewBox="0 0 24 24">
                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                  </svg>
                </div>
                <div class="flex-grow pl-4">
                  <h2 class="title-font mb-1 text-sm font-medium tracking-wider text-gray-900">STEP 2</h2>
                  <p class="leading-relaxed">Vice migas literally kitsch +1 pok pok. Truffaut hot chicken slow-carb health goth, vape typewriter.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

​

但是，您可以使用h-screen来使用完整的空间，而不管内容的长度如何。