Html页面在手机端出现右边空白

最新推荐文章于 2021-06-21 05:53:45 发布

半缘修道半缘君丶

最新推荐文章于 2021-06-21 05:53:45 发布

阅读量1.8w

点赞数 3

分类专栏： HTML5/CSS3 文章标签： html 测试手机空白 div

本文链接：https://blog.csdn.net/liu_yanzhao/article/details/53543942

版权

HTML5/CSS3 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

目前我遇到的原因只有一个：
body里有一个div把页面撑宽了，就是儿子的宽度比父亲，或者祖辈大就会出现这种
情况

为此做了个简单测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #header {
            width: 100%;
            height: 50px;
            border:5px solid #222;
        }
        #wrapper {
            width: 100%;
           border:5px solid red;
        }
        #container {
            width: 1000px;
            height: 400px;     
            margin: 0 auto;
            border:5px solid yellow;
        }
        #footer {            
            width: 100%;
            height: 50px;
            border:5px solid green;       
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="header">
    <h1>这里是header,width=100%</h1>
    </div>
    <div id="container">
        <h1>这里是container，width=1000px,居中</h1>
    </div>
    <div id="footer">
    <h1>
    这里是footer,width=100%
    </h1>
    </div>
</div>
</body>
</html>

1、电脑上效果图（浏览器宽度1500px）
这里写图片描述

2、手机端显示如图（浏览器宽度960px）：

这里写图片描述

很明显container挤出来一部分，具体多少可以算一下：1000px-960px=40px

3、总结：

①内部div最好不要定宽（可以定高），尽量用百分比
②一般都可以找出是哪个div宽度超了，如果还是找不到，暴力方法，去滚动条（不推荐）

body {
    overflow-x:hidden;
    width:100%;
}

本文地址：http://liuyanzhao.com/3580.html

转载请注明

半缘修道半缘君丶

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录