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