如何防止浏览器缩放时div元素的尺寸及位置发生变化？

问题根源 #

当前代码存在两个核心问题导致缩放异常：

• 未设置元素宽度，绝对定位元素默认宽度由内容撑开，缩放时内容排版变化会带动元素尺寸改变
• 使用margin-right:1200px这类固定像素值定位，浏览器缩放时固定像素的相对占比变化，直接引发位置偏移

修复方案 #

修改CSS代码，调整定位逻辑并限制元素尺寸：

#update-logs {
    position: absolute;
    bottom: 200px;
    left: 20px; /* 用left替代margin-right控制水平位置，定位更稳定 */
    width: 300px; /* 固定宽度，避免缩放时尺寸随内容变化 */
    box-sizing: border-box; /* 让边框宽度纳入元素总尺寸，防止尺寸溢出 */
    background-color: #1b1b1b;
    height: 350px;
    border-radius: 5px;
    border: 15px solid #0e0e0e; /* 合并边框属性，代码更简洁 */
    text-align: center;
    color: rgb(201, 201, 201);
}

适配优化建议 #

如果需要适配不同屏幕尺寸，可将宽度替换为相对单位（比如width: 25vw，表示占视口宽度的25%），这样缩放时元素尺寸会按比例自适应，同时保持位置稳定。

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