HTML页脚由ScrollBar隐藏

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>

第一个问题是我的页脚的右边框被滚动条遮挡,基本上,它位于滚动条的后面,正如您可以从缺少的右边框看到的那样.

第二个问题本身并不是一个问题,但我不喜欢这样一个事实,即我必须在页脚上方添加一个"假段落",以防止页面内容在页脚后面滚动.它不像一个干净的解决方案.

Answer 1

在您的页脚的CSS,替换width:100%用right:0

jsFiddle例子

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

jsFiddle例子

在原始代码中,单独100%宽度的框太宽,基于元素的boder和padding.