使用Tailwind与React开发右侧边栏的布局问题

问题回顾 #

左侧边栏布局正常，能正确适配顶部Headline组件；但右侧边栏会挤压Headline的宽度，占据其位置。若给右侧边栏加top-8，初始显示正常，但滚动页面时Headline不会固定，导致右侧边栏顶部出现空白。

现有代码 #

网站整体结构

<div>
  <div>
    <Headline /> {/*作为顶部导航栏的HeadLine组件*/}
  </div>
  {/* 左侧边栏 */}

  <div className="flex">
    <LeftSideBar CatalogueHandler={showCatalogueHandler} />
    
    <div className="flex flex-col">
      <div>
        {showCatalogue ? <Catalogue /> : <></>}
        <div>
          heylo
        </div>
      </div>
    </div>
    
    <Bottombar />
  </div>
  <RightBar/>
  <div>
  
  </div>
  
</div>

RightBar组件

import React from 'react' 
function RightBar() {
  return (
      <div className="fixed  h-screen bg-slate-200 top-0 right-0 w-24 right-0">
        Haylo
      </div>
  )
}

LeftSideBar组件（参考）

<div className="lg:flex flex-col items-center sticky top-0 w-24 h-screen bg-slate-200 hidden">
{/*内容区域*/}
</div>

修复方案 #

步骤1：让Headline固定在顶部 #

修改Headline的容器样式，添加粘性定位和层级，确保滚动时始终停留在顶部：

<div className="sticky top-0 z-50">
  <Headline />
</div>

• sticky top-0：让导航栏滚动时固定在顶部
• z-50：确保导航栏层级高于右侧边栏，避免被遮挡

步骤2：调整右侧边栏样式 #

修改RightBar的样式，去掉top-8，添加与Headline高度匹配的内边距，同时确保不会遮挡导航栏：

import React from 'react' 
function RightBar() {
  return (
      <div className="fixed h-screen bg-slate-200 top-0 right-0 w-24 pt-8 z-40">
        Haylo
      </div>
  )
}

• pt-8：假设Headline的高度为h-8，根据实际高度调整该值，让右侧边栏内容从导航栏下方开始
• z-40：层级低于导航栏，确保导航栏可正常交互

步骤3：给页面主容器添加右侧内边距 #

修改最外层容器的样式，添加右侧内边距，避免页面内容被右侧边栏遮挡：

<div className="pr-24">
  <!-- 原有网站结构内容 -->
</div>

• pr-24：与右侧边栏宽度w-24一致，确保所有内容（包括导航栏）不会被右侧边栏覆盖

效果说明 #

• 初始状态：右侧边栏不会挤压导航栏，内容从导航栏下方开始显示
• 滚动页面：导航栏固定在顶部，右侧边栏顶部不会出现空白，布局始终保持一致

内容的提问来源于stack exchange，提问作者Syed Zainullah Qazi