如何用Tailwind CSS实现页面宽高始终适配屏幕？

代码修正方案 #

你的布局溢出问题源于以下几点：

1. w-screen + m-8 组合导致横向溢出：w-screen 是视口宽度（100vw），加上左右margin会超出视口范围；
2. fixed导航脱离文档流，未处理内容遮挡与高度计算，导致纵向高度超出视口；
3. h-full 继承父元素h-screen高度，叠加导航高度后总高度超过视口。

修正后的代码（适配你的需求）：

<div className="min-h-screen m-8 box-border">
    {/* Fixed导航：与页面边距对齐，避免溢出 */}
    <Navbar className="fixed top-8 left-8 right-8 h-content bg-white" />

    {/* 内容容器：计算高度确保不超视口，避免被导航遮挡 */}
    <div className="flex w-full h-[calc(100vh-16px-60px)] pt-[60px]">
        <section className="w-1/2 bg-blue-100" />
        <section className="w-1/2 bg-green-100" />
    </div>
</div>

• box-border：让元素的padding/margin纳入宽高计算，避免额外尺寸溢出；
• 导航的top-8 left-8 right-8：与主容器m-8边距保持一致，不超出页面范围；
• h-[calc(100vh-16px-60px)]：100vh是视口高度，减去上下margin总和（16px）和导航高度（假设60px，可根据实际调整），确保总高度不超视口；
• pt-[60px]：给内容顶部加padding，避免被fixed导航遮挡。

宽高属性核心用法解析 #

• h-full / w-full：继承父元素的宽/高度，仅当父元素有明确宽高值时生效（比如父元素设了h-screen或固定高度）；
• h-screen / w-screen：直接等于浏览器视口的宽/高度（100vw/100vh），不受父元素尺寸限制，适合全屏容器；
• h-content / w-content：元素宽高自适应内部内容大小，内容多少决定元素尺寸，适合包裹动态内容的容器。

学习资源推荐 #

• Tailwind官方文档布局章节：系统讲解容器、宽高、定位、间距等核心布局属性，是最权威的参考；
• Tailwind官方实战布局教程：通过实际案例演示如何组合属性构建响应式布局；
• 社区整理的Tailwind布局速查表：汇总常用布局属性的使用场景与组合方式，便于快速查阅。

内容的提问来源于stack exchange，提问作者fullstackaubrey