HTML 页脚被滚动条隐藏

Question

我正在尝试在我的页面上创建一个页脚，当用户上下滚动时它会固定在页面底部。我大部分时间都在那里，但我在下面描述了几个问题。

我有一个 JSFiddle 在：https://jsfiddle.net/ay2y73co/

这是我用于页脚的代码：

<!-- This fake paragraph only exists to put some space above the footer
     so that page content is not hidden by the footer. -->
<p style="height:3.5em;margin:0px;">&nbsp;</p>

<!-- Here is the footer, proper. -->
<div style="position:fixed;bottom: 0px;left:0px;padding:0.5em; height:3.0em;background-color:rgb(200,200,200);margin: 0px;width:100%;font-size:75%;border: 2px inset red">
   <p>I want the right border to show up -- it seems it is clipped by the scrollbar.</p>
</div>

第一个问题是我的页脚右边框被滚动条遮住了，基本上，它位于滚动条后面，正如您从缺少的右边框中看到的那样。

第二个问题本身并不是真正的问题，但我不喜欢我必须在页脚上方放置一个 "fake paragraph" 来防止页面内容滚动到页脚后面.它感觉不像是一个干净的解决方案。

Answer 1

在您的页脚 CSS 中，将 width:100% 替换为 right:0

jsFiddle example

或保留它，并添加 box-sizing:border-box

jsFiddle example

在您的原始代码中，根据元素的边界和填充，仅 100% 宽度的框就太宽了。

Answer 2

如果你看这个fiddle:

https://jsfiddle.net/ay2y73co/6/

您会看到我在您的内容周围添加了一个包装，与页脚分开。我还添加了一个 CSS class 'footer'，并将你的 CSS 放在提供的样式表中。

html, body {
    width: 100%; height: 100%;
}
body {
    margin: 0;
    padding: 0 0 5.25em;
    overflow: hidden;
}
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
div.content {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}
div.footer {
    position:fixed;
    bottom: 0px;
    left:0px;
    padding:0.5em;
    height:6.0em;
    background-color:rgb(200,200,200);
    margin: 0px;
    width:100%;
    font-size:75%;
    border: 1px inset red
}

要解决您的问题，您可以对作为内容父级的正文或其他标签应用底部填充。 padding 应该等于页脚的高度，这样滚动条就不会超过正文的整个高度。

Answer 3

将此添加到您的页脚：

.footer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
  }

边框加起来等于 div 的总宽度，因此如果您将页脚的宽度设置为 100% 并在其中放置一个 1px 的边框，则宽度将为 100% + 1px 左边框 + 1px 右边框。 box-sizing: border-box 自动计算块元素的所有边距、填充和边框的总和，并调整它们以匹配实际指定的宽度。

HTML 页脚被滚动条隐藏

HTML Footer is Hidden by ScrollBar

html

css

footer

fixed