使用固定vw单位将块元素定位至屏幕右侧的问题

直接用固定比例的vw设置left会出问题——元素自身宽度在不同视口下占的vw比例不一样，大屏时元素宽度对应的vw值变大，固定的98.8vw就会让元素超出视口或者留空隙。用JS动态计算就能解决这个问题，同时保留相对定位的文档流特性。

实现思路 #

通过JS获取视口宽度和元素自身宽度，计算出元素需要偏移的距离并转成vw单位赋值给left属性，同时监听窗口resize事件实时更新，确保任何屏幕宽度下元素都能贴紧右边缘。

完整代码示例 #

CSS

html, body {margin: 0; padding: 0}

#te {
    background-color: red;
    position: relative;
    /* 去掉固定left值，由JS动态设置 */
    transition: left 0.2s; /* 可选：添加过渡让尺寸变化更顺滑 */
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <span id="te">text</span>
    <script src="script.js"></script>
</body>
</html>

JS（script.js）

const el = document.getElementById('te');

function setRightAlign() {
    const viewportWidth = window.innerWidth;
    const elementWidth = el.offsetWidth;
    // 计算偏移的vw值：(视口宽度 - 元素宽度) / 视口宽度 * 100
    const leftVw = ((viewportWidth - elementWidth) / viewportWidth) * 100;
    el.style.left = `${leftVw}vw`;
}

// 页面加载时初始化
window.addEventListener('load', setRightAlign);
// 窗口尺寸变化时实时更新
window.addEventListener('resize', setRightAlign);

补充说明 #

• 相对定位的元素依然会占据文档流中的原有位置，不会脱离文档流
• 如果需要让元素和右边缘保留间隙，只需在计算时减去对应像素值，比如(viewportWidth - elementWidth - 10) / viewportWidth * 100就是留出10px的间隙

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