HTML background-color : 是否可以从 div 填满屏幕？

Question

我的网站响应有问题。在桌面模式下，我的屏幕中央有一个 div，背景颜色为灰色。在平板电脑模式下，我想让 div 及其内容在屏幕中央，但用灰色填充整个屏幕宽度。可能吗？

@media screen and (min-width: 767px) and (max-width: 1366px) {
  .backgroundGrey {
    background-color: #F2F2F2;
    /* please tell me it's possible */
  }
}

<body>
  <section>
    <div class="flexCenter backgroundGrey">
      <div>
        <h2>Content
                
          <h2>
        
      </div>
    </div>
  </section>
</body>

编辑解决方案

谢谢大家的回答，我把它搞混了，找到了解决我问题的方法。我添加了一个新的 div，我的背景颜色设置在绝对位置：

<body>
    <section>
        <div class="backgroundGreyFullWidth"></div>
        <div class="flexCenter">
            <div>
                <h2>Content</h2>
            </div>
        </div>
    </section>
</body>

@media screen and (min-width: 767px) and (max-width: 1366px) {

    .backgroundGreyFullWidth {
        background-color: #f2f2f2;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 650px;
        left: 0; 
        right: 0;
    }
}

Answer 1

使用宽度和高度 100%

.backgroundGrey {
       background-color: #F2F2F2;
       width:100%;
       height:100vh;
       display:flex;
       justify-content:center;
       align-items:center;
   }

<div class="backgroundGrey">content</div>

Answer 2

您必须使用两个 div，第一个 div 用于背景颜色，第二个 div 用于保留内容

遵循以下代码：

<body>
   <section>
      <div class="flexCenter backgroundGrey">
         <div class="content">
            <h2> Content <h2>
         </div>
      </div>
   </section>
</body>


@media screen and (min-width: 767px) and (max-width: 1366px) {

   .backgroundGrey {
       background-color: #F2F2F2;
       width : 100%;
       height : 100%;
   } 
   .content{
       width:200px;
   }

}

Answer 3

只需使用 absolute 或 fixed 定位并将元素绑定到每一侧，如下所示：

.backgroundGrey {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #F2F2F2;
  /* other attributes to position content inside */
}

HTML background-color : 是否可以从 div 填满屏幕？

HTML background-color : Is it possible to fill the screen from a div?

html

css

background-color