Question

我设置了一个包含position fixed的页脚，其中height和width 100%以及left:0px和bottom:0px。

当我调整浏览器大小时，页脚上方的内容会在页脚后面被阻止，即使我上面的div元素上有overflow:auto。

以下是调整浏览器大小并阻止内容时的屏幕截图。

Answer 1

你可以通过给你的包装器底部边距等于页脚的高度+填充来解决这个问题，所以在这种情况下：

#wrapper {
    margin-bottom: 213px;
    overflow: auto;
}

解释是，当您使用position:fixed定位某些内容时，您可以使用与position:absolute相同的方式将其从文档流中删除（不同之处在于修复后将内容固定到视口而不是文档，因此不会滚动）。这意味着通常定位的内容不受其影响，并且就好像它不存在一样。

在您的情况下，您的包装器div使用了所有可用空间，其中包括页脚后面的空间。通过在包装器的底部添加边距，您可以在页脚的开头有效地停止它，如果需要更多空间，则会显示滚动条。

Answer 2

你可能想要这样的东西：

<body>
  <div id="page">
    <div id="logo">...</div>
    <div id="head">...</div>
    <div id="wrapper">...</div>
    <div id="footerSpacer"></div>
    <div id="footer">...</div>
  </div>
</body>

然后是CSS文件：

html, body {
    height: 100%;
}
page {
    min-height: 100%;
    position: relative;
}
footerSpacer {
    height: 200px;
}
footer {
    position: absolute;
    bottom: 0;
    height: 200px;
}

如果页面很长，页脚就会处于正常的页面流动位置。但是，如果页面比窗口高度短，它将保留在窗口的底部。

Answer 3

如果它只是直接到底部，你是否需要有页脚position:fixed;？为什么不做position:absolute;？要么是这样，要么降低页脚的z-index，使其落后于内容。

Answer 4

你能不在div div和footer之间加一个div，然后为它添加一个明确的类：both;

Answer 5

图片已停靠，因为它有position: fixed，它将其粘贴到窗口上的那个点，而不是整个页面流中的那个点。这与人们用来制作那些不随页面滚动的导航页眉和页脚的技术相同。

对于您想要做的事情，您应该浮动页面的内容并将clear: both应用到页脚的CSS，这将使其清除左右浮动元素并强制它到底部。使用固定或绝对定位将允许其他元素隐藏在页脚后面。

另一种方法是使用position: absolute而不是position: fixed将页脚粘贴到页面底部，然后将主要内容包装在<div>中，并给予底部边距相等到页脚的高度。

另一方面，在声明html标签和添加属性时，最好使用小写字符;我注意到你有很多大写字母。将css和javascript卸载到外部文件通常也是一个好主意，然后分别使用<link rel="stylesheet" type="text/css" src="path_to_css_file_from_html_file_location">和<script src="path_to_javascript_file_from_html_file_location" >导入它们。

使用css溢出会导致一种奇怪的行为

5 个答案: