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

最新推荐文章于 2024-09-25 08:58:56 发布

哈喽雷雷

最新推荐文章于 2024-09-25 08:58:56 发布

阅读量3.6k

点赞数 1

分类专栏： css技巧

css技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目前我遇到的原因只有一个：
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

转载请注明