Question

我的页脚在我的网站的每个页面上都能正常运行，除了我的“关于”页面的移动版本。在我的“关于”页面上，内容（标题，段落等）大于视口的高度，并且由于某种原因，页脚会粘到视口的底部，但不会粘到页面的底部。

This is my website's About page.如果您将浏览器窗口的大小调整为与移动设备类似的宽度，您应该看到我在说什么。

这是我的HTML结构（没有内容）：

<!DOCTYPE>
<html>
    <head></head>
    <body>
        <div class="wrapper">
            <header><nav></nav></header>
            <section></section>
            <footer></footer>
        </div>
    </body>
</html>

以下是相关的CSS：

html,
body {
    height: 100%;
}

.wrapper {
    position: relative;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
}

还有一件奇怪的事情正在发生，我无法解释......

如果我转到我的“关于”页面，请将浏览器窗口的宽度调整为更具移动性的内容，然后进入Chrome开发人员工具...然后向下滚动，超过页脚所在位置（但不应该是）该页面看起来<html>，<body>和<div class="wrapper">元素都会在页脚结束的位置结束，即使<section>内容继续向下。这就像内容溢出整个<html>元素，我不知道为什么会发生这种情况。

另外，我知道position: fixed并且它很容易解决这个问题，但我不希望在视口中始终显示页脚。如果页面上的内容占用的空间大于视口的高度（需要垂直滚动），我希望用户能够向下滚动然后到页面底部的页脚，而不是总是把它放在脸上。

Answer 1

在检查您的实际网站时，.about .section-content div中的所有元素都会浮动。您可以从中删除属性或清除浮动。

Answer 2

我只是将你的包装器css位置改为绝对位置，并根据要求将页脚放到页面底部。

.wrapper {
    position: absolute;
    min-height: 100%;
}

如果在非移动视图中使用内容布局，请使用媒体查询。

@media screen and(max-width:480px) {
   .wrapper {
      position: absolute;
      min-height: 100%;
    }
    .about h2, .about p {
         float:none;
    }
}

无论视口大小或内容如何，如何将页脚放置在页面底部？

2 个答案:

无论视口大小或内容如何，​​如何将页脚放置在页面底部？

2 个答案:

无论视口大小或内容如何，如何将页脚放置在页面底部？