您当前的位置: > HTML/JS/CSS >

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

发布时间:2019-04-28 22:23编辑:admin阅读(

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

    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. }