div百分百占滿屏幕的兩種css寫法

2018-09-03CSS11810
  • 詳情內容
  • 留言點評

很多人都知道,div容器在一般情況下即使設置高為100%也不會真的占滿屏幕(瀏覽器窗口高度),那么究竟有沒有辦法用樣式實現100%屏高呢?答案是肯定的。今天益吾庫就來分享一下div百分百占滿屏幕的兩種css寫法,一種是絕對定位方法,另一種是根容器百分比方法,具體實例代碼如下:

絕對定位方法:

<style>
*{
    padding: 0;
    margin: 0;
}
#myDiv {
    width: 100%;
    height: 100%;
    background: red;
    position: absolute
}
</style>
<body>
    <div id="myDiv">
        我是一個全屏DIV
    </div>
</body>

根容器百分比方法:

原理:html和body本身沒有高度,他們的高度是由子元素撐起來的,所以我們需要為其設置對應的百分比高度。

<style>
*{
    padding: 0;
    margin: 0;
}
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
}
#myDiv {
    width: 100%;
    height: 100%;
    background: red;
}
</style>
<body>
    <div id="myDiv">
        我是一個全屏DIV
    </div>
</body>


歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金