轉賬
原文地址: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>