當容器大於視口時，將高度設置為瀏覽器視口的100％？

Question

我正在網站上工作，我需要設置div的高度和寬度，以覆蓋瀏覽器視口的整個區域，就像許多現代網站一樣。 但是，我不能簡單地將其高度設置為100％，因為它的父元素是另一個div，其高度必須設置為大於瀏覽器窗口。 還有另一種方法嗎？

這是一個與我的網站類似的代碼示例。

HTML

<div class="entireThing">
  <div class="contentBox">
  </div>
  <div class="contentBox">
  </div>
</div>

CSS

.entireThing {
    height: 8000px;
    width: 100%;
}
.contentBox {
    height: 100%; /*This works only if parent is same size as window*/
}

Answer 1

5.1.2。 視口百分比長度：'vw'，'vh'，'vmin'，'vmax'單位

視口百分比長度相對於初始包含塊的大小。 當初始包含塊的高度或寬度改變時，它們相應地縮放。

使用視口百分比長度。 在這種情況下， 100vh 。

.contentBox {
    height: 100vh;
}

更新的示例

---

您還可以使用calc()減去10px上/下邊距：

.contentBox {
    height: calc(100vh - 20px); /* Subtract the 10px top/bottom margins */
    margin: 10px;
    color: white;
    background-color: #222;
}

更新的示例

..這是值得指出的，你需要在父元素上建立一個新的塊格式化上下文 ，以防止折疊邊距 。