Tilda网站横向滚动出现空白区域求助（附CSS代码）

问题背景 #

我完全不懂CSS和HTML，在Tilda搭建的网站中添加了几段第三方代码后，在16:10比例的显示器上横向滚动网站时会出现空白区域。关闭代码后问题消失，但这段代码是实现头部菜单半透明且背景图置于其下方所必需的。其中一段代码如下：

<style>
#rec494906714 {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 9998;
}
</style>

另有一段类似代码，仅#rec值和z-index不同。

问题原因 #

这段代码里给绝对定位的头部元素设置了width: 100%，这个值对应的是浏览器当前视口的宽度。当页面出现横向滚动时，页面实际宽度会超过视口宽度，此时这个头部元素无法覆盖整个页面宽度，就会出现空白区域。

修复方案 #

把代码中的width: 100%;替换成left: 0; right: 0;，修改后的代码示例：

<style>
#rec494906714 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
}
</style>

另外那段类似的代码也做同样修改，替换对应元素的width属性为left: 0; right: 0;即可。

修复原理 #

使用left: 0; right: 0;可以让绝对定位的元素自动拉伸至父容器的左右边缘，无论页面是否横向滚动，都能保持和页面一致的宽度，既保留了头部半透明、背景图在下方的效果，又解决了横向滚动的空白问题。

内容的提问来源于stack exchange，提问作者iOS Swift-man Junior