设置div为超大height值是否可行？会导致Web应用卡顿吗？

先说可行性 #

这么做确实能临时搞定你的布局问题——浏览器会认可这个超大高度值，只要父容器有overflow: hidden或者本身限制了可视范围，就不会出现滚动条。但这本质是个凑活的hack，根本没解决布局的根源问题。

你遇到的情况，大概率是布局逻辑里某个环节依赖了容器高度（比如子元素定位、浮动清除、或者某些隐式的高度计算），超大高度强行满足了这个隐性要求，但相当于用“暴力填充”掩盖了真正的布局漏洞。

关于卡顿风险 #

多数情况下不会卡。现代浏览器的渲染引擎很聪明，只要这个超大高度的元素没有实际内容，它不会真的去渲染1亿像素的空白区域——只会处理可视范围内的部分。

但也有几个要注意的坑：

• 如果这个元素带复杂背景（比如渐变、重复图案），或者嵌套了大量子元素（哪怕是隐藏的），浏览器计算布局时可能额外消耗资源，极端情况会出现卡顿。
• 老版本浏览器（比如IE）对超大尺寸元素的优化差，可能会拖慢布局计算。
• 后续布局逻辑一变，这个超大高度很可能引发新问题：比如突然冒出来滚动条、干扰其他元素定位。

更靠谱的替代思路 #

• 先挖根源：为啥非要超大高度才能解决？是不是父容器的高度设置逻辑错了？比如应该用min-height代替固定高度，或者用Flexbox、Grid这类现代布局方式来实现需求？
• 如果确实需要容器“足够高”，可以用min-height: 100vh（占满当前视口高度），或者让高度跟着内容动态计算，别硬写个离谱的大数值。
• 真要固定高度，也尽量用贴合实际需求的合理值，别搞极端。

内容的提问来源于stack exchange，提问作者Islam Y-