css - 我无法在移动设备上查看我网站的右侧

Question

没有回答之前提交的问题。

我无法在移动设备上查看我网站的右侧。这是 html 和容器样式的基本编码。问题出在风格的某个地方，但我无法弄清楚。我尝试了几种选择但没有运气。请帮忙。

      html, body {
      margin:0;
      padding:0;
      max-width: 100%;
      overflow-x: hidden;
      }

      #container {
      background-color: #000;
      height: 1054px;
      width: 1400px;
      margin-right: auto;
      margin-left: auto;
      margin-top: -20px;

      #header {
  background-image: url(images/header_wrapper.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 200px;
  width: 1400px;
  float: left;
      }

      #content {
  background-image: url(images/main_wrapper.jpg);
  background-repeat: no-repeat;
  background-position: center;
  height: 690px;
  width: 1400px;
  float: left;
  overflow: auto;
      }

      #footer {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
  color: #FF0;
  background-image: url(images/footer_wrapper.jpg);
  background-repeat: no-repeat;
  float: left;
  height: 64px;
  width: 1400px;
  background-position: center;
  text-align: center;
  padding-top: 100px;
      }

Answer 1

通过快速查看您的代码，我会说它必须对 overflow-x: hidden; 做一些事情。或最大宽度:100%；应用于顶部的 HTML/Body 标记。

我认为它在某处被继承，因此您的 overflow:auto 不会在移动设备上触发(因此会切断您的一半页面)。

如果可能，请在开发人员机器上打开您的页面，并使用 firefox/chrome 开发工具将页面作为移动设备运行(以便您可以检查 css)，然后禁用/启用，直到它真正按照应有的方式显示。