无论视口或内容大小如何，如何将页脚定位到页面底部？

问题描述 投票：0回答：2

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

这是我的 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
并且它可以轻松解决此问题，但我不希望页脚始终在视口中可见。如果页面上的内容占用的空间超过视口的高度（需要垂直滚动），我希望用户能够向下滚动，然后到达页面底部的页脚，而不是始终将其放在他们的脸上。

html css position footer
2个回答
0
投票

通过检查您的实时站点，您的 

.about .section-content
div 中的所有元素都是浮动的。您可以从中删除属性或清除浮动。

0
投票

我只是将你的包装器 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;
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.