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


轉賬

原文地址:https://www.cnblogs.com/cnyaokai/p/6512519.html

在body只有一個div的時候,可以通過這樣的方式讓div撐滿整個屏幕。

1.給div設置定位。

  復習一下——

  css中position有五種屬性:

    static:默認值,沒有定位

    absolute:絕對定位,相對於父級元素進行定位

    relative:相對定位

    fixed:固定定位,相對於瀏覽器窗口進行定位

    inherit:從父元素繼承定位信息  

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

代碼如下:

復制代碼
 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         div{
 7             width:100%;
 8             height: 100%;
 9             background: yellow;
10             position: absolute;
11         }
12 
13 </style>
14 
15 
16 <body>
17 
18 <div></div>
19 
20 </body>
復制代碼

 

 

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

復制代碼
 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         html,body{
 7             width: 100%;
 8             height: 100%;
 9         }
10         div{
11             width:100%;
12             height: 100%;
13             background: yellow;
14         }
15 </style>
16 
17 <body>
18 <div></div>
19 </body>
復制代碼


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM