可變高度的自舉div

Question

我正在創建其中一個滾動網站，您只需向下滾動頁面即可。我的頁面交替黑白背景。

我有以下頁面：

<div class="row> 
<div class="col-xs-9 introduction"> 
    <p> TEXT </p> 
</div> 
</div> 

與下面的CSS：

.introduction { 
height: 120%; 
padding-top: 150px; 
text-align: center; 
background: #eee; 
min-height: 800px; 

}

我的問題是，當我讓我的瀏覽器的窄不夠，窗口我的介紹部分中的TEXT溢出白色背景並溢出到黑色部分。 如何指定類的大小以便所有文本總是在白色背景內？ 謝謝！

Answer 1

這是因爲你無法閱讀文檔。

<div class="col-xs-9 introduction"> 
    <p> TEXT </p> 
</div> 

在這裏，在這個代碼這個類的COL-XS-9'，XS是用來確保該列在任何時候都保持水平，所以你的響應設置不妥善安排，他們應該是這樣。

我建議你閱讀有關網格系統的文檔。

使用這個代替

<div class="col-md-9 introduction"> 
    <p> TEXT </p> 
</div> 

它不會給你任何問題。

Answer 2

可以使用溢出文本父

要隱藏文本或作出滾動

或者你可以使用nicescroll VS slimscroll

Overflow MDN

Answer 3

你可以試試這個CSS修復：

.introduction { 
height: 100vh; 
padding-top: 150px; 
text-align: center; 
background: #eee; 
max-height:100%; 
}