CSS使一個div充滿屏幕的方法

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

1. 給div設(shè)置定位。

復(fù)習(xí)一下——

 css中position有五種屬性: 
      static:默認(rèn)值,沒有定位
      absolute:絕對定位,相對于父級元素進(jìn)行定位
      relative:相對定位 
      fixed:固定定位,相對于瀏覽器窗口進(jìn)行定位
      inherit:從父元素繼承定位信息  

除了默認(rèn)值static和inherit之外,添加其他三種都可以實(shí)現(xiàn)窗口自適應(yīng)。
代碼如下:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width:100%;
        height: 100%;
        background: yellow;
        position: absolute;
    }
</style>
<body>
<div></div>
</body>
  1. 通過設(shè)置html,body的寬高來讓div充滿屏幕
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    div{
        width:100%;
        height: 100%;
        background: yellow;
    }
</style>

<body>
<div></div>
</body>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,108評論 1 92
  • @轉(zhuǎn)自GitHub 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型?低版本IE的盒子模型有什么不同的?(1)有兩種, IE 盒子模...
    YT_Zou閱讀 1,379評論 0 1
  • <a name='html'>HTML</a> Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,814評論 1 19
  • 今天有個姑娘結(jié)婚了,還記得第一次遇見她時天空的顏色,是她報(bào)的西財(cái)我才跟著來的,那時很久神禾塬上的花兒只相識這一朵。...
    灞上劉少閱讀 384評論 0 0
  • 我想,即使是很久很久以后,我也不會忘記,這些男孩給我?guī)淼木薮蟮母袆樱粫泴λ麄償?shù)不清的心動。這是我青春中極其...
    獨(dú)角鯨閱讀 329評論 0 0

友情鏈接更多精彩內(nèi)容