页脚在移动设备上无法正常显示

Question

网站：ifnrussiacisforum.ru

PC上的宽度为100％，但移动设备上有一些空白空间，这样：

代码是：

HTML：

<div class="footer">
    <div class="container">
        <img src="images/logo-img.jpg" alt="beeboss" />
    </div>
</div>

CSS：

 .footer {
     height: 60px;
     width: 100%;
     background: #000;
  }

.footer .container {
    width: 1003px;
    margin: 0 auto;
}

 .footer .container img {
     margin:19px 0px 0px 20px;
  }

Answer 1

使用此CSS代码

CSS：

.footer .container {
    width: 100%;
    margin: 0 auto;
}

 .footer .container img {
     margin:19px 0px 0px 20px;
  }

Answer 2

解决了此代码的问题：

html, body {
    min-width: 1003px;
}

Answer 3

编织： http://kodeweave.sourceforge.net/editor/#58fb912e2d456f902a77b8ebc76aa515

默认情况下，正文标记有margin。您可以通过将 Normalize 合并到CSS中或从您的身体中移除margin来解决此问题。

编辑：难怪为什么你的宽度如此怪诞，你在大多数容器上定义了800px和1003px。加上你的CSS非常WET！

将以下课程width更改为100%

• .footer .container
• 。主要
• .header

然后替换最小宽度/更改宽度800px＆amp;＆amp;以下课程1003px至80%。

• .extra-巴利
• .request形式
• 。链接
• .plashka
• .bally
• 的.Mac

还要专注于使您的代码更加DRY。

＆＃13;

＆＃13;

body {
  margin: 0;
}

.footer {
  height: 60px;
  width: 100%;
  background: #000;
}

.footer .container {
  width: 100%;
  margin: 0 auto;
}

.footer .container img {
  margin: 19px 0 0 20px;
}

＆＃13;

<div class="footer">
  <div class="container">
    <img src="https://forums.gota.io/images/smilies/smile.png" alt="beeboss" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;