如何将背景颜色应用于整个视口宽度？ [复制]

Question

我不知道如何使背景颜色适合视口大小。我使用了 100vh，它正确地覆盖了高度。但是，当我使用 100vw 时，背景只覆盖屏幕的右侧而不是左侧。

这是我的小提琴代码的link。

这是我的代码：

HTML

<div id="main-doc">
<section id="welcome-section">
    <div class="center-text">
        <h1 id="title">Hello, I am Lee</h1>
        <p>xxx</p>
    </div>
</section>
</div>

CSS

#main-doc{
text-align: center;}

#welcome-section{
background-color: #2A3D45;
background-size: cover;
padding-top: 25px;
width: 100vw;
height: 100vh;

.center-text{
position: absolute;
width: 200px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -25px;}

Answer 1

那是因为body 元素有自己的边距。您必须将其设置为 0 或使用 #welcome-section 块的负边距进行补偿。

但是如果你想为整个页面设置背景，你应该设置 body 本身的样式（甚至是:root），而不是你的自定义元素。

body {
  background: #2A3D45;
  margin: 0;
}

#welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  height: 100vh;
  color: #fff;
}

<div id="welcome-section">
  <h1 id="title">Hello, I am Lee</h1>
  <p>xxx</p>
</div>

Answer 2

您需要删除页面上的margins 和paddings 以删除旁边烦人的空白

喜欢这个

body{
  margin: 0;
  padding: 0;
}

Answer 3

简单的答案是background-size: cover;属性是背景图像的属性，与background-color无关。所以，使用background-size:cover; 是没有意义的。

其次，您只需要添加一些基本的 CSS 重置以使其正常工作，因为填充选项会搞砸事情。 （因为浏览器会添加自己的默认 CSS，例如 body 标签周围有 ma​​rgins 并且一些块级元素也有默认边距和填充。即，为什么我们需要 CSS重置为基线开始）。

 /* This is Basic CSS reset */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#main-doc{
  text-align: center;
}

#welcome-section{
    background-color: #2A3D45;
    width: 100vw;
    height: 100vh;
    padding-top: 25px;
}
.center-text{
    position: absolute;
    width: 200px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -25px;
}

<div id="main-doc">
    <section id="welcome-section">
        <div class="center-text">
            <h1 id="title">Hello, I am Lee</h1>
            <p>Your friendly neighbourhood web developer</p>
        </div>
    </section>
</div>

Answer 4

您的页面正文中有一些边距 并隐藏溢出：

body{
margin: 0;
overflow: hidden;
}