如何让HTML结构适配全屏无滚动？图片适配后仍存在滚动问题

你的代码出现滚动是因为浏览器默认给body设置了边距，同时需确保内容不会超出视口范围。以下是修复后的代码：

<body style="margin: 0; padding: 0; overflow: hidden;">
    <div style="position: fixed; top:0;left:0;width:100vw;height:100vh;background:red;z-index:100000;display:flex;flex-direction:column;">
        <div style="background:green">aaa</div>
        <div style="flex-grow:1; overflow: hidden;">
            <img src="https://placehold.co/3200x3200" style="width: 100%; height: 100%; object-fit: contain;">
        </div>
        <div style="background:blue">bbb</div>
    </div>
</body>

• 给body添加margin:0;padding:0消除默认边距，overflow:hidden确保页面不会出现滚动条
• 给中间图片容器添加overflow:hidden，防止容器内容溢出引发滚动
• 保留object-fit:contain确保图片按比例缩放并完整显示在容器内

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