当前位置：文江博客话题详情

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

发布于 2024-11-28 02:35:44 字数 450 浏览 3 评论 0原文

我有这个网站。

我设置了一个位置固定的页脚，其高度和宽度分别为100%和left :0px 和 bottom:0px。

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

这是调整浏览器大小且内容被阻止时的屏幕截图。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞笑我太脆弱 2024-12-05 02:35:44

您可以通过为包装器提供等于页脚高度+填充的底部边距来解决此问题，因此在这种情况下：

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

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

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

You can fix this by giving your wrapper a bottom margin that is equal to to the height+padding of your footer, so in this case:

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

The explanation is that when you position something using position:fixed, you remove it from the flow of the document in the same way as with position:absolute (the difference being that fixed will pin your content to the viewport rather than the document and so will not scroll). That means that normally positioned content is not affected by it, and acts as if it is not there.

In your case, your wrapper div was using all of the available space, which included space that was behind your footer. By adding a margin to the bottom of the wrapper, you are effectively stopping it at the start of the footer, and if more space is required a scrollbar will be displayed.

回复收藏 0 原文

懒猫 2024-12-05 02:35:44

您可能需要这样的内容：

<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;
}

这样，如果页面很长，页脚就会位于正常的页面流位置。然而，如果页面比窗口高度短，它将停留在窗口的底部。

You probably want something like this:

<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>

And then the CSS file:

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

That way the footer is in the normal page flow place if the page is long. If however the page is shorter than the window height, it'll stay at the bottom of the window.

回复收藏 0 原文