'main' 内容偶尔会渗入页脚（但仅限于登台）

Question

从 wordpress 切换内容管道。

一切顺利，但有一个微小的差异必须很简单，但让每个人都陷入困境。

在此生产页面上，当您滚动主页时...您只能看到 'main' 可见的内容：
https://pracplay.com/partners （等同于：https://pracplay.com/index.php/partners/）

在登台页面上，[如果 window 已调整大小，或者您使用的是移动设备]，您通常可以在页脚中看到 'main' 中不可见的内容（见附图，或住在：https://stage.pracplay.com/partners )

我们尝试过的：

运行生产差异 html（很少使用 js）
修复了所有明显关闭的问题

这似乎与页脚的 z-index div 或页脚的透明度 div 有关。

也尝试过：

强制页脚的 zindex 高得离谱，但没有任何效果
更改不透明度或使用页脚的背景色 Alpha 通道无法重现它。

我们的问题应该比这更简单，因为我们只是复制一个现有站点，所有内容都相同 css。所以它应该是 div 上的 class 名称问题或更简单的东西......在这个 post.

这一定很容易修复，我想我会尝试 post 我的理解，看看它是否产生了任何建议或想法。

为不想看网站但知道问题的专家附上屏幕截图observation/experience。

（我们主要开发非 Web 应用程序，但是摆脱 wordpress 并让 Web 使用与我们其他应用程序使用的进程相同的进程是令人兴奋的。）

感谢任何帮助！

Answer 1

您的布局结构有点奇怪，但您可以通过将页脚容器放在#page 或#main 内来修复它。由于定位固定，页面与页脚重叠。我建议使用通用的干净布局结构，避免不必要地使用容器。

你可以简单地做这样的事情：

<body>
  <div class="page-wrapper">
  
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
        </ul>
      </nav>
    </header>
    
    <main>
      <section>
        <div class="grid">
           ....
        </div>
      </section>
    </main>
    
    <footer>
      ....
    </footer>
    
  </div>
 </body>

Answer 2

好的请有新眼光的人来看看。

它非常简单，与 fixed/relative、z-order 或 t运行sparency 无关（至少不是直接的）。

他们运行 staging-v-prod 在此处提到的实际页面上再次出现差异。它很明显缺少一个 div 包装器，class id 为 'page-content' 此 page-content class 将明确的白色背景应用于页面的 main/central 内容。所以当它丢失时，这些 divs 是 t运行sparent 并且正在渗入页脚。

所以虽然看起来像是页脚问题，但实际上是页面内容问题。

现在在这方面分期与生产相匹配。

一个特别有用的工具是 textcompare 的 html 比较器视图：

https://www.textcompare.org/html/

这比常规差异更容易发现 html 差异。

'main' 内容偶尔会渗入页脚（但仅限于登台）

'main' content is occasionally bleeding into footer (but only in staging)

html

css

transparency

opacity