强化(一)解决body和div全屏填充的问题

强化(一)解决body和div全屏填充的问题

问题


  • 在设置body全屏填充的时候(直接设置div为100%):body未填满body填满过头

  • 在设置body里的div全屏填充的时候(直接设置div为100%):div未填满div填满过头(出现滚动条)div偏离方向

解决方式


下面两步都要做,不能只做一步

  1. 将全局的margin和padding都设置为0,防止不同浏览器默认值不同而造成显示效果出现误差

    • “*”代表全局
    *{
        margin: 0;
        padding: 0;
    }
    
  2. 将html和body的高和宽都设置为100%(必须都设置)

    html,body{
        width: 100%;
        height: 100%;
    }
    

举例


html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="./css/主页.css" type="text/css">
</head>
<body>
    <div class="div1"></div>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    background-image: url(../picture/背景图1.jpg);
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no;
}
.div1{
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.169);
}
posted @   史小鹏  阅读(753)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示