佔用整個頁面，不僅僅是窗口高度

Question

我聽說使用100vh會使元素佔據整個瀏覽器窗口。確實如此。 100vh確實不是儘管使元素佔用整個頁面。滾動條可能會干擾這一點。

例子：

#container { 
 
    display: flex; 
 
} 
 

 
#a { 
 
    height: 100vh; 
 
    background-color: lightblue; 
 
    flex: 1; 
 
} 
 

 
#b { 
 
    flex: 2; 
 
    word-wrap: break-word; 
 
    background-color: lightgray; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div id="container"> 
 
    <div id="a"></div> 
 
    <div id="b">As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long.</div> 
 
</div>

我怎樣才能確保背景顏色保持爲整個頁面一樣，而不僅僅是可見的部分在開始？

Answer 1

很容易就讓它100%或不指定高度。

#a { 
 
    height: 100%; 
 
    word-wrap: break-word; 
 
    background-color: lightblue; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div id="a">As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. </div>

Answer 2

由於您的文本包含您的div中，沒有需要指定的高度 - 這將是它的內容一樣大。

#a { 
 
    word-wrap: break-word; 
 
    background-color: lightblue; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div id="a">As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. As you can see, this <code>div</code> is very large and will run off the page. Scroll down to see that the background color does not apply further down on the page. </div>

編輯

你想要的是（據我所知）是不可能的。你可以做的是爲背景着色，並使用a作爲佔位符。我不確定這是否能解決您的問題，但這是我能想到的唯一解決方案。

#container { 
 
    display: flex; 
 
    background-color: lightblue; 
 
} 
 

 
#a { 
 
    flex: 1; 
 
} 
 

 
#b { 
 
    flex: 2; 
 
    word-wrap: break-word; 
 
    background-color: lightgray; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div id="container"> 
 
    <div id="a"></div> 
 
    <div id="b">As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long. As you can see, this text is very long.</div> 
 
</div>