当前位置：主页 > 查看内容

使用css使div占满整个屏幕的实现方法

发布时间：2021-07-13 00:00| 有 位朋友查看

简介：使用定位方法 style*{ padding: 0; margin: 0;}#myDiv { width: 100%; height: 100%; border: 1px solid red; position: absolute}/stylebody div id=myDiv 我要全部填满 /div/body 使用百分比 html和body本身是没有高度的，他们的高度由子元素撑起来 所以设……

使用定位方法

<style>
*{
    padding: 0;
    margin: 0;
}
#myDiv {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    position: absolute
}
</style>
<body>
    <div id="myDiv">
        我要全部填满
    </div>
</body>

使用百分比

html和body本身是没有高度的，他们的高度由子元素撑起来

所以设置对应的百分比即可。

<style>
*{
    padding: 0;
    margin: 0;
}
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
}
#myDiv {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    /*position: absolute*/
}
</style>
<body>
    <div id="myDiv">
        我要全部填满
    </div>
</body>

总结

以上所述是小编给大家介绍的使用css使div占满整个屏幕的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！


原文链接：https://m.jb51.net/css/634561.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：详解纯css实现瀑布流（multi-column多列及flex布局） 下一篇：详解CSS3原生支持div铺满浏览器的方法

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐