對容器使用「height：100vh」時，會出現垂直滾動條

我希望內容佔用瀏覽器窗口的全部高度，但不能超出範圍。對容器使用「height：100vh」時，會出現垂直滾動條

當使用100vh作爲容器高度時，我可以看到垂直滾動條出現。

.container { 
    height: 100vh; 
    border: 3px solid lightsteelblue; 
    border-radius: 10px; 
}

可能是什麼問題？

編輯： 更詳細的代碼：

CSS

html, body { 
    margin: 0; 
    padding: 0; 
} 

* { 
    box-sizing: border-box; 
} 

.container { 
    height: 100vh; 
    margin: 0px; 
    padding: 0px; 
} 

.page_content { 
    height: 85vh; 
    width: 95vw; 
    border: 3px solid lightsteelblue; 
    border-radius: 10px; 
    overflow-y: auto; 
    margin: 0 auto; 
} 

.footer { 
    height: 14vh; 
    width: 95vw; 
    margin: 0px auto; 
    padding: 0px; 

}

HTML

<html> 
    <body> 
    <div class="container"> 
     <div class="page_content"> 
      ... 
     </div> 
     <div class="footer"> 
     ... 
     </div> 
    </div> 
    </body> 
</html>

來源

2017-06-20 cookya

僅供參考。在移動瀏覽器上，100vh可能並將會表現怪異。請參閱：https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser –

@DanielZiegler謝謝，它不是針對移動瀏覽器 – cookya

的問題是，你必須與它的邊界，而像填充，你必須添加我t到你的身高。

要麼你使用這樣的：

.container { 
    height: calc(100vh - 3px); 
}

或者這樣：

.container { 
    height: 100vh; 
    border: 3px; 
    box-sizing: border-box; 
}

來源

2017-06-20 06:35:13 trichetriche

這是不正確的 –

哪部分不是？ – trichetriche

請使用我的代碼 –

ü可以消除由溢出-Y滾動條：隱藏;你應該使用calc函數來刪除你的頁眉高度例如高度：100vh;

calc（100vh -20px）如果你的標題是20px的高度。所以你得到100vh！

來源

2017-06-20 06:36:04 Alex

默認情況下body和html分配給margin或padding某些像素。嘗試使用以下代碼。

1vh = veiwport高度的1％ 100vh =高度的100％。

所以永遠不要計算高度-3px。這樣

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

來源

2017-06-20 06:39:13

use 
body{ 
    margin :0px; 
} 
and 
.container { 
    height: 100vh; 
    border: 3px; 
    box-sizing: border-box; 
}

來源

2017-06-20 06:42:33

body { 
    margin: 0; 
} 

.container { 
    height: 100vh; 
    border: 3px solid lightsteelblue; 
    border-radius: 10px; 
    box-sizing: border-box; 
}

這並獲得成功。請參閱並在此處進行測試：https://jsfiddle.net/ddan/jsenLgre/

來源

2017-06-20 06:44:38 DDan

對容器使用「height：100vh」時，會出現垂直滾動條

回答

相關問題