首頁 >web前端 >css教學 >讓div撐滿整個螢幕的方法(css)

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

不言
不言原創
2018-05-09 11:41:084814瀏覽

這篇文章主要介紹了關於讓div撐滿整個螢幕的方法(css),有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

在body只有一個p的時候,可以透過這樣​​的方式讓p撐滿整個螢幕。

1.給p設定定位。

  複習一下-

  css中position有五種屬性:

#    static:預設值,沒有定位

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

    relative:相對定位

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

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

除了預設值static和預設值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的寬高來讓p充滿螢幕

 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>

以上就是本篇文章的全部內容了,更多相關內容請追蹤PHP中文網。


以上是讓div撐滿整個螢幕的方法(css)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn