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

如何解决如何将背景颜色应用于整个视口宽度？

我不知道如何使背景颜色适合视口大小。我使用了 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;}

解决方法

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

body{
margin: 0;
overflow: hidden;
}

,

简单的答案是 background-size: cover; 属性是 background-image 的属性，与 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>

,

那是因为 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>

,

您需要删除页面上的 function Test-Primary { param ( [String]$id,[Ref]$state ) if ($id) { Write-Host 'initialize Primary' $testPrimary = [Ordered]@{} $testPrimary.Add('id',$id) $testPrimary.Add('primaryInit',(Get-Date)) Start-Sleep -s:(Get-Random -Minimum 1 -Maximum 5) Test-Secondary -state:([Ref]$testPrimary) -init return $testPrimary } else { Write-Host 'process Primary' $state.Value.Add('primaryProcess',(Get-Date)) Start-Sleep -s:(Get-Random -Minimum 1 -Maximum 5) Test-Secondary -state:$state } } function Test-Secondary { param ( [Switch]$init,[Ref]$state ) if ($init) { Write-Host 'initialize Secondary' $state.Value.Add('secondaryInit',(Get-Date)) Start-Sleep -s:(Get-Random -Minimum 1 -Maximum 5) } else { Write-Host 'process Secondary' $state.Value.Add('secondaryProcess',(Get-Date)) Start-Sleep -s:(Get-Random -Minimum 1 -Maximum 5) } } CLS $state = Test-Primary -id:'Test' Test-Primary -state:([Ref]$state) CLS foreach ($key in $state.Keys) { Write-Host "$key $($state.$key)" } Write-Host 和 margin 以删除侧面令人讨厌的空白

喜欢这个

padding