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

avatar 2016年12月09日11:32:18 1 5409 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
目前我遇到的原因只有一个：

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

转载请注明
历史上的今天
十二月
09日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0