如何使固定定位的div宽度与屏幕高度相等？

嘿，这个需求我碰到过好多次了，有几种简单又靠谱的实现方式，看你需要的兼容性来选：

方法1：直接用视口单位设置宽度（兼容性佳） #

既然你的div高度已经是屏幕的100%（也就是视口高度），那直接把宽度设置为100vh就行了——vh是视口高度的单位，100vh就等于整个屏幕的高度，这样宽度自然和高度相等。

修改后的代码如下：

div {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%; /* 或者写成100vh，效果完全一致 */
  width: 100vh;
  background: #e0e0e0; /* 加个背景色方便你直观看到效果 */
}

这个方法兼容性非常好，IE9及以上的浏览器都支持，代码也直白易懂。

方法2：使用CSS aspect-ratio 属性（现代浏览器首选） #

如果你只需要支持现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+），那用aspect-ratio属性会更优雅，它可以直接强制元素保持1:1的正方形比例。只要你设置了高度为100%（或100vh），宽度会自动匹配高度，不用手动计算数值。

代码示例：

div {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh; /* 用100vh比100%更清晰，明确是视口高度 */
  aspect-ratio: 1 / 1; /* 1:1的宽高比 */
  background: #e0e0e0;
}

这种写法更符合“语义化”的思路，你只需要定义高度和比例，剩下的交给浏览器处理，后期维护也更方便。

小提醒 #

如果屏幕宽度小于div的宽度（比如竖屏转横屏时），div会超出屏幕右侧，这是符合你需求的——因为你要求宽度和高度（屏幕100%高度）相等，所以这种情况是正常的。如果希望div在屏幕宽度不足时不超出，同时保持正方形且高度尽可能大，那就是另一种场景了，你当前的需求应该不需要这个~

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