【发布时间】：2021-10-27 08:48:34
【问题描述】：
我在 React.js 中有我的应用程序：
<header className="header__section">
</header>
这是我的 CSS 文件 (SCSS)：
.header__section {
width: 120rem;
height: 48rem;
background-image: url("../Assets/someimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
我尝试将以下内容添加到我的 CSS (SCSS) 文件中：
我也尝试添加：
body, html{
width: 100%;
height: 100%;
}
/** 但它也没有修复它 */
问题是header__section的宽度没有占据页面的整个宽度，而是右侧有一个白色区域，由于某种原因header没有拉伸到屏幕的整个宽度，即使改变到不同的屏幕分辨率。
这是header__section的截图：
以上问题的解决办法是什么？
【问题讨论】：
-
我们通常使用%指定宽度，请尝试这种方式。使用
width:80%;而不是width: 80rem; -
按照你设置 SCSS 的方式，你已经在
.header_section上明确设置了宽度和高度 - 无论你在html或body元素上做什么，都可以.header_section将覆盖它，除非您在html或body元素上使用 '!important` 标志。如果进行相关调整以防止发生冲突并不能解决问题，那么您可能需要考虑重复背景图像。
标签： javascript html css reactjs sass