首頁 > web前端 > css教學 > 主體

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

不言
發布: 2018-05-09 11:41:08
原創
4772 人瀏覽過

這篇文章主要介紹了關於讓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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板