如何使容器充满整个页面？ 也要回应

Question

我有不同的部分，例如“关于我”，“联系人”，“照片库”等，我希望当我打开网站时，“关于我”容器将显示在整个页面上，以填充页面而没有任何内容内容将从下一部分出现。

<div class="container-fluid bg-2 text-left">
 <div id="About me">
  <h1 class="margin">About me</h1>
  <p> My text here</p>
 </div>
</div>

对于索引文件中包含内容的每个容器，我都有一个“容器流体”类。

.container-fluid {
  padding-top: 70px;
  padding-bottom: 70px;
}

任何想法将不胜感激！

Answer 1

这应该增加每种状态下浏览器的宽度。

.container-fluid {
width:100%
padding:70px 0px 70px 0px;
}

Answer 2

您可以使用视口相对单位 。

.example {
  min-height: 100vh;
  min-width: 100vw;
}

Answer 3

给容器大约height:100vh; width:100%; height:100vh; width:100%;

Answer 4

 .container-fluid {
     width:100%
     padding:70px 0px 70px 0px;
     margin :0;
  }

如果上面的代码不起作用，请像填充这样写！important：70px 0px 70px 0px！important; 有时旧样式不会被新样式覆盖，因此您可以通过编写上述声明来使其变得重要。