您当前的位置: > HTML/JS/CSS >
Html页面在手机端出现右边空白
发布时间:2019-04-28 22:23编辑:admin阅读()
- <!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>
- body {
- overflow-x:hidden;
- width:100%;
- }
目前我遇到的原因只有一个:
body里有一个div把页面撑宽了,就是儿子的宽度比父亲,或者祖辈大就会出现这种
情况
为此做了个简单测试:
1、电脑上效果图(浏览器宽度1500px)
2、手机端显示如图(浏览器宽度960px):
很明显container挤出来一部分,具体多少可以算一下:1000px-960px=40px
3、总结:
①内部div最好不要定宽(可以定高),尽量用百分比
②一般都可以找出是哪个div宽度超了,如果还是找不到,暴力方法,去滚动条(不推荐)