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

avatar 2016年12月9日11:32:18 评论 614 views

目前我遇到的原因只有一个:

body里有一个div把页面撑宽了,就是儿子的宽度比父亲,或者祖辈大就会出现这种
情况

为此做了个简单测试:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         #header {
  12.             width: 100%;
  13.             height: 50px;
  14.             border:5px solid #222;
  15.         }
  16.         #wrapper {
  17.             width: 100%;
  18.            border:5px solid red;
  19.         }
  20.         #container {
  21.             width: 1000px;
  22.             height: 400px;
  23.             margin: 0 auto;
  24.             border:5px solid yellow;
  25.         }
  26.         #footer {
  27.             width: 100%;
  28.             height: 50px;
  29.             border:5px solid green;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <div id="wrapper">
  35.     <div id="header">
  36.     <h1>这里是header,width=100%</h1>
  37.     </div>
  38.     <div id="container">
  39.         <h1>这里是container,width=1000px,居中</h1>
  40.     </div>
  41.     <div id="footer">
  42.     <h1>
  43.     这里是footer,width=100%
  44.     </h1>
  45.     </div>
  46. </div>
  47. </body>
  48. </html>

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

2、手机端显示如图(浏览器宽度960px)

这里写图片描述

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

3、总结:

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

  1. body {
  2.     overflow-x:hidden;
  3.     width:100%;
  4. }

 

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

转载请注明

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: