无固定px时如何实现100%高度可滚动的固定定位Div？

现在的代码没法达到预期效果，本质是不符合CSS百分比高度的计算规则：

• 所有带%的尺寸值，计算时都必须依赖参考元素的明确高度值，哪怕是position: fixed的固定定位元素，写max-height: 100%时，浏览器也不会自动把这个100%对应到视口高度
• 只要没有手动给html、body标签写死具体高度，这个100%的计算就会直接失效，导致max-height规则不生效，元素会被超长内容直接撑成文档全高，自然也不会出现预期的滚动效果
• 另外原代码里width: 300px后面漏了CSS必需的结束分号，在严格解析的场景下，也会连带造成后续样式失效

完全不需要写死高度方向的固定像素值，只要把高度的计算基准从「父元素百分比」切换为「动态视口尺寸」就行，核心是替换掉失效的max-height: 100%规则，最终CSS写法如下：

.container {
  position: fixed;
  /* 补上定位基准，避免元素出现无预期的偏移 */
  top: 0;
  left: 0;
  width: 300px;
  /* 自动匹配实时可用视口高度，不需要手动换算像素 */
  max-height: 100dvh;
  overflow-y: auto;
}

实现逻辑说明 #

• dvh是动态视口高度单位，计算时会自动适配浏览器视口的实时尺寸：不管桌面端窗口怎么缩放、移动端浏览器的地址栏显示还是隐藏，这个值都会自动对应当前用户能看到的实际可用高度
• 如果需要兼容非常老旧的设备，把100dvh换成100vh也可以正常满足桌面端的需求，两个都是动态计算单位，全程不需要手动写死固定像素
• 如果固定容器需要给其他固定元素（比如顶部导航、底部操作栏）预留空间，也可以用动态计算实现无px适配：比如给顶部导航预留视口高度8%的空间，只需要把max-height改成calc(100dvh - 8vh)即可，完全不需要手动量尺寸写固定值

不要为了让原来的max-height: 100%生效，手动给html、body标签设置固定高度，这种做法会破坏页面原生的整体滚动逻辑，反而引入新的兼容性问题。

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