容器的宽度/div的宽度即使换成不同的屏幕分辨率也不会占据页面的整个宽度

Posted 2023-02-22

【中文标题】容器的宽度/div的宽度即使换成不同的屏幕分辨率也不会占据页面的整个宽度

【英文标题】：width of container / width of div does not occupy the entire width of the page even when changing to different screen resolutions

【发布时间】：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` 标志。如果进行相关调整以防止发生冲突并不能解决问题，那么您可能需要考虑重复背景图像。

【参考方案1】：

您应该能够将 .header__section 的宽度设置为 100% 而不是 80rem

【讨论】：

@GucciBananaKing99 问题是“什么是使标题拉伸整个宽度的修复方法？”，我认为这个建议的更改很好地回答了这个问题。如果他们问“为什么在这种情况下不能使用width: 100%？”，我会同意你的看法。

@abc_123 一个简单的问题，位置相对 + 顶部和左侧属性。您是否使用这些来定位背景图像？如果是这样，请完全删除它们并使用 background-position 属性而不是w3schools.com/cs-s-ref/pr_background-position.asp

嗯，你可以尝试将 html, body 更改为 width: 100% 而不是 min-width: fit-content;

因为这是一个 React 项目，所有内容都包含在 #root 元素中吗？如果是这样，您可能还想将宽度设置为 100%，以防它的默认大小以某种方式更改