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

来源：互联网发布：世界奇妙物语奶奶知乎编辑：程序博客网时间：2024/05/16 15:36

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

转载请注明

0 0