代码之家 › 专栏 › 技术社区 › Ooker

如何使地物在视口中始终可见?

daisyui viewport tailwind-css css

0

Ooker · 技术社区 · 11 月前

使用Tailwid和daisyUI组件库,我正在设计一个包含两个部分的页面。左侧部分包含文本和按钮。右侧部分是一个带标题的图。我想要全部 <figure> 在视口中始终可见,并且地物保持其比例。这是我的代码:

<div class="flex flex-col md:flex-row bg-green-300 items-center max-w-none space-x-10 px-10 h-screen">
  <section class="align-middle justify-center">
    <article class="prose py-10">
      <h1>404 â KhÃ´ng tÃ¬m tháº¥y trang</h1>
      <p>
        LiÃªn káº¿t rÃºt gá»n vá»i ÄuÃ´i <code>{ÄuÃ´iRÃºtGá»n}</code>{" "}
        chÆ°a tá»«ng ÄÆ°á»£c táº¡o hoáº·c ÄÃ£ bá» xoÃ¡ trÃªn há» thá»ng. LiÃªn há» ngÆ°á»i gá»i liÃªn káº¿t cho báº¡n Äá» ÄÆ°á»£c há» trá»£.
      </p>
    </article>
    <button class="btn">
      <a href="/">Táº¡o liÃªn káº¿t khÃ¡c</a>
    </button>
  </section>
  <section class="align-middle">
    <figure class="max-h-fit">
      <img src="https://placehold.co/2048x1488" alt="Tranh váº½ hai nguá»i Äang trÃ² chuyá»n vá»i nhau á» quÃ¡n nÆ°á»c vá»a hÃ¨" />
      <figcaption>
        Tranh: <a class="prose" href="https://doi-thoai.deno.dev/TheLinhRab.doi-thoai.1">Linh Rab</a>
      </figcaption>
    </figure>
  </section>
</div>

Tailwind Playground

当视口的高度足够高时,它可以很好地工作:

但是,当视口的高度足够低时,它的工作方式会很奇怪:

我尝试了各种 Max-Height 类,但都不起作用。你知道吗?

1 回复 | 直到 11 月前

1

2

Wongjn 11 月前

您可以考虑设置 max-height 的 <figure> 到 100vh 。这反映了同样的情况 height 的根 <div> 。然后,使用垂直柔性布局来收缩 <img> 必要时的高度:

<script src="https://cdn.tailwindcss.com/3.4.4?plugins=typography"></script>

<div class="flex flex-col md:flex-row bg-green-300 items-center max-w-none space-x-10 px-10 h-screen">
  <section class="align-middle justify-center">
    <article class="prose py-10">
      <h1>404 â KhÃ´ng tÃ¬m tháº¥y trang</h1>
      <p>
        LiÃªn káº¿t rÃºt gá»n vá»i ÄuÃ´i <code>{ÄuÃ´iRÃºtGá»n}</code>{" "}
        chÆ°a tá»«ng ÄÆ°á»£c táº¡o hoáº·c ÄÃ£ bá» xoÃ¡ trÃªn há» thá»ng. LiÃªn há» ngÆ°á»i gá»i liÃªn káº¿t cho báº¡n Äá» ÄÆ°á»£c há» trá»£.
      </p>
    </article>
    <button class="btn">
      <a href="/">Táº¡o liÃªn káº¿t khÃ¡c</a>
    </button>
  </section>
  <section class="align-middle">
    <figure class="max-h-screen flex flex-col items-start">
      <img src="https://placehold.co/2048x1488" alt="Tranh váº½ hai nguá»i Äang trÃ² chuyá»n vá»i nhau á» quÃ¡n nÆ°á»c vá»a hÃ¨" class="flex-1 min-h-0"/>
      <figcaption>
        Tranh: <a class="prose" href="https://doi-thoai.deno.dev/TheLinhRab.doi-thoai.1">Linh Rab</a>
      </figcaption>
    </figure>
  </section>
</div>