內容包裝未覆蓋div的整個區域

Question

我有以下內容包裝設置。

<div class="page_background">
        <div class="page">
             <p>gnjfikgnfik</p>
        </div>
</div>

.page_background {


width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #888888); /* Standard syntax */
}
.page {
    background-color: #FFFFFF;
    width: 85%;
    min-height: 100%;
    bottom: 0;
}

由於某種原因，我的.page div不能覆蓋整個頁面。 我在正確的位置都關閉了div。 我以為min-height: 100%; 確保它會覆蓋頁面的整個高度？ 我也嘗試過bottom: 0; 還是一無所有。 我該如何糾正？

Answer 1

min-height需要明確指定封閉框的高度。

來自MDN的 min-height文檔：

百分比：相對於生成的盒子的包含塊的高度計算百分比。 如果未明確指定包含塊的高度（即，它取決於內容的高度），並且該元素的位置不是絕對的，則將百分比值視為0。

解決方案：使用position: absolute page元素，然后使用height: 100%使其覆蓋整個頁面。

.page_background {
  width: 100%;
  position: absolute;
  height: 100%;
  ....
}
.page {
  position:absolute;
  width: 85%;
  height: 100%;
  ...
}

見小提琴

Answer 2

在page_background內添加“位置：絕對”

.page_background {
    position:absolute;
    width: 100%;
    min-height: 100%;
    background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#282828, #888888); /* Standard syntax */
}

Answer 3

以百分比為單位的高度要求明確聲明元素父級的高度-例如，父級高度：500px或height：50％。 因為您希望它是屏幕視圖的100％，所以必須將元素的所有父級都設置為html（包括），因此將html和body都設置為高度100％：

html, body {
height: 100%;
}

如果您要定位新的瀏覽器，則可以在元素上使用height: 100vh 。 1vh是視口的1％。 在這種情況下，您不必將父級設置為相對於視口的100vh，而不是父級。