页脚显示位置

Question

我刚刚开始在我的 Windows 桌面上使用文本编辑器进行一个非常简单的网站开发。我制作了两个 html 页面，一个作为“主页”页面链接到显示其他内容的“其他”页面。两个页面都链接到一个 CSS 样式表。

我无法解决的是页面的长度差异很大，“主页”页面为 1200 像素，“其他”页面为 7000 像素。因此，如果我将样式表中的内容高度设置为 7000 像素，以便页脚显示在“其他”页面内容的末尾，则“主页”页面上的页脚距离为 5800 像素。

我尝试了页脚的各种位置值，但均无济于事。对我来说，解决这个问题的最佳方法可能是什么。

我已将文件发布在 Github 上 https://gist.github.com/Pedro147/7b9427def1a44f4bd8ae

首页是index_2 另一页是 7Seg LED 电路 style_2 样式表
菜单/导航文件是 nagging-menu.js

Answer 1

我认为您应该为两个页面使用不同的 id，以便在 css 中自动设置高度，这将根据父元素设置两个页面的高度。

Answer 2

在 1ndex_2 中，您的 body 标签在页脚之前关闭，尽管这可能不会导致您的问题。只是看一眼，似乎你的所有东西都是绝对定位的，根据我的经验，当你的页面高度不同时，这很令人沮丧。绝对定位元素在页面流中不占用任何高度。因此，如果您希望您的页脚始终位于内容之后而无需设置其高度，您可以做几件事。

简单的选择：因为您知道页面的高度，所以只需使用内联样式设置内容 div 的高度。然后，如果页脚 div 是内容 div 之后的第一个元素，它将被放置在它的正下方。

耗时选项：尝试使用边距、浮动 div 甚至表格来布局页面而不使用绝对定位。如果页面上的内容不会改变，这不是必需的，但是当您处理动态内容绝对定位时，一切通常都不起作用。