Tailwind LG屏幕断点下页面顶部内容消失问题求助

开发者阿泽

2026-6-22

双栏布局LG屏幕内容裁切与独立滚动修复方案

问题根源

LG屏幕下，aside使用flex items-center垂直居中内容，当内容高度超过视口时，顶部内容会被视口裁切无法显示
外层容器同时混用grid和flex布局规则，导致高度计算异常，进一步加剧内容显示问题

修复方案

通过调整布局结构和样式，实现aside与main区域各自独立滚动，所有内容完整展示：

1. 修正父容器布局

将外层grid容器的lg:flex-row移除，改用纯grid规则实现双栏，避免布局冲突：

<div className="grid grid-cols-1 lg:grid-cols-2 bg-white text-slate-700">

2. 调整Aside区域样式

移除垂直居中的flex items-center，改为垂直排列的flex flex-col，确保内容从顶部开始展示，同时保留滚动属性：

<aside className="flex flex-col col-span-1 px-4 py-8 overflow-y-auto lg:h-screen lg:max-h-screen text-slate-300 bg-slate-900">

flex flex-col：让aside内的内容从上到下正常排列
lg:h-screen lg:max-h-screen：固定LG屏幕下aside的高度为视口高度，超出内容自动滚动
overflow-y-auto：内容超出时显示滚动条

3. 调整Main区域样式

移除justify-center，避免内容垂直居中导致潜在的裁切问题，同时保留独立滚动能力：

<main className="flex flex-col items-center col-span-1 p-8 overflow-y-auto text-center lg:h-screen lg:max-h-screen text-slate-700">

修改后的完整代码

<div className="w-full h-full">
  <div className="grid grid-cols-1 lg:grid-cols-2 bg-white text-slate-700">
    {/* Aside */}
    <aside className="flex flex-col col-span-1 px-4 py-8 overflow-y-auto lg:h-screen lg:max-h-screen text-slate-300 bg-slate-900">
      <div className="w-2/3 mx-auto md:w-2/3">
        <img className="h-8" src="/images/logo-white.svg" alt="" />

        <h2 class="mt-10 font-serif font-semibold text-3xl leading-tight text-gray-100">
          Grow on LinkedIn effortlessly <br class="hidden md:inline-flex lg:hidden xl:inline-flex" />
          in just 10min/days.
        </h2>

        <p className="mt-8 text-xl font-normal leading-tight text-slate-300"> helps you grow professionally PERIOD!</p>

        <ul class="mt-4 space-y-4 list-none text-slate-300">
          <li class="flex items-center">
            <i class="mr-2 text-xl text-green-500 fa-sharp fa-solid fa-circle-check"></i>
            <span>Create <strong className="font-display">impactful content</strong> in your own style using
              AI</span>
          </li>
          <li class="flex items-center">
            <i class="mr-2 text-xl text-green-500 fa-sharp fa-solid fa-circle-check"></i>
            <span><strong className="font-display">Monitor your growth</strong> with in-depth analytics</span>
          </li>
          <li class="flex items-center">
            <i class="mr-2 text-xl text-green-500 fa-sharp fa-solid fa-circle-check"></i>
            <span>Access to <strong className="font-display">10m+ viral</strong> articles, youtube videos &amp;
              LinkedIn posts</span>
          </li>
        </ul>

        {/* Testimonial */}

        <article className="max-w-4xl mx-auto mt-16 mb-10 text-gray-700">
          <figure className="flex flex-col overflow-hidden bg-white rounded-lg md:flex-row lg:flex-col xl:flex-row">
            {/* Testimonial Photo */}
            <div className="w-full md:w-1/3 lg:w-full xl:w-1/3">
              <img
                src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                alt="Customer Name"
                className="object-cover w-full h-48 md:h-full md:rounded-l-lg"
              />
            </div>
            {/* Testimonial content */}
            <figcaption className="w-full p-4 md:w-2/3 lg:w-full xl:w-2/3">
              <blockquote className="italic">
                &quot;Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry standard dummy text ever
                since the 1509s&quot;
              </blockquote>
              <p className="mt-4 text-lg font-semibold font-display">Sarah Cornor</p>
              <p className="text-slate-500">Solopreneur IndieHacker</p>
            </figcaption>
          </figure>
        </article>

      </div>

    </aside>
    {/* Main Content */}
    <main className="flex flex-col items-center col-span-1 p-8 overflow-y-auto text-center lg:h-screen lg:max-h-screen text-slate-700">
      <h1 class="font-serif text-4xl font-bold">Try <br class="md:hidden inline-flex" />for Free</h1>
      <p class="mt-2 text-slate-500">
        💳 No credit card required • 🆓 7-days trial
      </p>
      <button class="px-10 py-3 mt-16 text-lg text-white bg-[#2967BC] rounded-lg hover:bg-[#004182]">
        <span class="flex items-center font-display">
          <i class="text-2xl fa-brands fa-linkedin"></i>
          <span class="ml-2">Sign in with LinkedIn</span>
        </span>
      </button>
      <p className="mt-2 text-sm text-center text-slate-500">
        By creating your account with SprintSocial <br />
        you agree to the{' '}
        <a href="#" className="font-semibold text-slate-500 hover:underline">
          Terms
        </a>
        {' '} &amp;{' '}
        <a href="#" className="font-semibold text-slate-500 hover:underline">
          Privacy Policy
        </a>
      </p>
      <p className="mt-10 text-sm text-center">
        Have a Question?{' '}
        <i className="fa-regular fa-message" />
        <a href="#" className="underline text-slate-700">
          Chat with Founder
        </a>
      </p>

    </main>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Harsha M V