為什么 90% 的 div 高度在兩個不同的屏幕上是不同的？

Question

我想用一個 `Div 來占據整個屏幕的高度，並在它周圍有一個漂亮的框架並且沒有滾動。

因此我有以下 HTML。

<div class="take-page-height">
  <div class="welcome-div">
    <div class="col-md-12 center-text">
      <div>
        <h1>Hello</h1>
      </div>
    </div>
  </div>
</div>

和以下 CSS

.take-page-height {
  height: 100%;
  width: 100%;
  padding: 1.5%;
  position: fixed;
}

.welcome-div {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  background-color: $card-bg;
  background-clip: border-box;
}

當我減小外部 Div 的高度時，不同屏幕的高度不同。 即使我使用百分比。 為什么會這樣？

以及如何解決我的問題，即 div 占據整個屏幕 + 我給它的填充而不滾動？

親切的問候

Answer 1

要使用全屏高度，請使用height: 100vh; . 要使用全屏寬度，請使用： width: 100vw; .

主要問題是，它是內容區域的確定高度。 意味着填充、邊距和邊框會溢出它，默認情況下你會得到滾動條。

為了解決這個問題，第一種方法應該是重置默認的正文邊距： body { margin: 0; } body { margin: 0; } 。

但是填充和邊框仍然會導致溢出。 不使用calc function的簡單解決方案是更改默認框行為。 默認的盒子行為是： box-sizing: content-box; . 如果將其更改為box-sizing: border-box; 填充和邊框將不再引起問題。

PS：我為parant div添加了紅色背景色以進行演示。

編輯，我將尺寸移動到身體。 還將主體聲明為網格。 它設置導航欄將采用導航欄所需的高度，文本區域將填滿剩余空間。 這是通過為網格模板中導航欄的行高指定最小內容的高度來完成的。 所以它只會是導航欄需要的高度。 因此，是否使用相對或固定高度或僅使用內容高度聲明它取決於您。

 body { margin: 0; box-sizing: border-box; height: 100vh; width: 100vw; display: grid; grid-template-rows: min-content auto; } nav { min-height: 80px; background-color: blue; }.take-page-height { padding: 1.5%; background-color: red; /* added for demonstration */ }.welcome-div { position: relative; display: flex; align-items: center; width: 100%; height: 100%; word-wrap: break-word; background-color: green; background-clip: border-box; }

 <nav>Navbar here</nav> <div class="take-page-height"> <div class="welcome-div"> <div class="col-md-12 center-text"> <div> <h1>Hello</h1> </div> </div> </div> </div>

Answer 2

一個不修改代碼的簡單修復方法是設置box-sizing: border-box; 在您的 css 文件中

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

在不修改任何其他行的情況下修復了該問題。 另外，正如用戶tacoshy所說，沒有必要使用position: fixed; . 使用此 css 代碼實現了您的結果：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.take-page-height {
  height: 100vh;
  width: 100vw;
  padding: 1.5%;
}

.welcome-div {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  background-color: $card-bg;
}

Answer 3

百分比適用於我們使用的設備。 要獲得絕對值，您可以使用另一個值，例如 px、vh 和 vw、em、rem。

Answer 4

如果您希望外部 div 為整個屏幕的大小，那么。

.take-page-height {
  height: 100vh;
  width: 100vw;
  padding: 1.5%;
  position: fixed;
}

如果您想離開該邊界，則可以嘗試以下操作：

.take-page-height {
  height: calc(100vh - 1.5%);
  width: calc(100vw - 1.5%);
  padding: 1.5%;
  position: fixed;
}

但老實說，更好的方法是執行以下操作。

.take-page-height {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-div {
  width: 98.5%;
  height: 98.5%;
}