讓div撐滿整個屏幕的方法(css)

原文鏈接:https://www.jianshu.com/p/45cb7bb1b15b

1. 給div設置定位。

css中position有五種屬性: 
      static:默認值,沒有定位
      absolute:絕對定位,相對於父級元素進行定位
      relative:相對定位 
      fixed:固定定位,相對於瀏覽器窗口進行定位
      inherit:從父元素繼承定位信息  

除了默認值static和inherit之外,添加其他三種都可以實現窗口自適應。
代碼如下:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width:100%;
        height: 100%;
        background: yellow;
        position: absolute;
    }
</style>
<body>
<div></div>
</body>

 

2.通過設置html,body的寬高來讓div充滿屏幕

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    div{
        width:100%;
        height: 100%;
        background: yellow;
    }
</style>

<body>
<div></div>
</body>

3.或者:

<style>
    html, body{ margin:0; height:100%; }
    div{
        width:100%;
        height: 100%;
        background: yellow;
    }
</style>

<body>
<div></div>
</body>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章