为何未设置position:fixed时，height:100%无法让侧边栏全屏？

核心逻辑：百分比高度的参考对象变了 #

CSS里的height: 100%不是直接对应屏幕高度，而是相对于父元素的高度计算的。如果父元素没有明确设置高度（比如默认的auto，高度仅由内容撑开），子元素的height:100%就没有可参考的基准值，自然不会生效。

当你给侧边栏加上position: fixed后，这个元素会脱离正常文档流，它的包含块直接变成浏览器的视口（可见屏幕区域）。这时候height:100%就会以视口高度为基准，直接铺满整个屏幕高度。

结合你的代码场景 #

你的侧边栏div在没加fixed时，父元素是React的Fragment（渲染后无实际容器），往上追溯到body和html标签——默认情况下这两个标签的高度是auto（由页面内容撑开），所以你的div设置height:100%没有参考值，无法铺满屏幕。

加上position: fixed后，div不再受父元素高度限制，直接以视口为参考，height:100%就生效了。

替代方案（不用fixed的情况） #

如果不想用固定定位，也可以给html和body设置全局样式：

html, body {
  height: 100%;
  margin: 0;
}

这样正常流里的元素设置height:100%时，就能参考body的100%高度生效，但这种方式可能会影响页面其他布局，而fixed更直接适配侧边栏固定且铺满高度的需求。

你的代码示例 #

import React, { useState } from 'react'
        
export default function Bar() {
  return (
    <>
      <div className="d-flex flex-column flex-shrink-0" style={{width: "4.5rem",backgroundColor:"#cee8ff",height:"100%",position: "fixed"}}>
        <a href="" className="d-block p-3 link-dark text-decoration-none">AMS</a>
        <ul className='nav nav-pills nav-flush flex-column mb-auto text-center'>
          <li className="nv-item my-2">
            <a href="" className="nav-link active py-3 border-bottom" aria-current="page"><i class="fa-solid fa-house"></i></a>
          </li>
          <li className='my-2'>
            <a href="" className="nav-link py-3 border-bottom"><i class="fa-solid fa-address-card"></i></a>
          </li>
          <li className='my-2'>
            <a href="" className="nav-link py-3 border-bottom"><i class="fa-sharp fa-solid fa-bolt"></i></a>
          </li>
          <li className='my-2'>
            <a href="" className="nav-link py-3 border-bottom"><i class="fa-regular fa-calendar-days"></i></a>
          </li>
          <li className='my-2'>
            <a href="" className="nav-link py-3 border-bottom"><i class="fa-solid fa-gear"></i></a>
          </li>
          <li className='my-2'>
            <a href="" className="nav-link py-3 border-bottom"><i class="fa-solid fa-user"></i></a>
          </li>
        </ul>
        
      </div>
      
    </>
  )
}

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