如何创建跨两列且固定在页面顶部的头部容器？

安全阿岳

2026-6-12

解决方案

要实现全屏无滚动、顶部跨栏头部、左右两栏布局的效果，你需要调整整体布局结构，核心是让页面容器刚好占满屏幕高度，同时头部独立于左右栏之外，跨整个页面宽度。以下是修正后的代码：

<body class="font-mono flex flex-col min-h-screen m-0">
  <!-- 顶部头部：跨整个页面宽度，链接居中 -->
  <div class="p-4 flex justify-center gap-x-4 text-sm">
    <a href="/link1.html" class="hover:underline">Link1</a>
    <a href="/link2.html" class="hover:underline">Link2</a>
    <a href="/link3.html" class="hover:underline">Link3</a>
  </div>
  
  <!-- 主体左右栏：占满剩余屏幕高度，无滚动 -->
  <div class="flex-1 flex flex-col md:flex-row">
    <div class="flex-1 flex flex-col justify-center items-end p-10 space-y-5">
      <p>左侧内容...</p>
    </div>

    <div class="flex-1 flex flex-col justify-center items-start p-10 bg-gray-100">
      <p>右侧内容...</p>
    </div>
  </div>
</body>

关键调整说明

页面高度控制：给body添加flex flex-col min-h-screen，让页面整体采用垂直flex布局，且最小高度等于屏幕高度。主体部分用flex-1自动填充头部以外的剩余空间，确保整个页面刚好一屏，无需滚动。
头部链接居中：把头部容器的justify-between改成justify-center，这样不管有几个链接，都会在页面顶部居中显示，解决3个链接时中间项不在正中的问题。
左右栏自适应：用flex-1代替md:w-1/2，让左右栏在桌面端自动平分宽度，移动端自动占满整宽，同时确保栏高填充剩余屏幕空间。
消除默认边距：给body加m-0，避免浏览器默认边距导致页面出现滚动条。