如何使容器充滿整個頁面？ 也要回應

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; 有時舊樣式不會被新樣式覆蓋，因此您可以通過編寫上述聲明來使其變得重要。