我试图在我的页面上创建一个页脚，当用户上下滚动时，该页脚始终停留在页面底部。我大部分时间都在那儿，但是我在下面描述了几个问题。
我在以下位置有一个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;"> </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>
第一个问题是页脚的右边框被滚动条遮盖，基本上，它位于滚动条后面，如您从缺少的右边框中所见。
第二个问题本身并不是真正的问题，但是我不喜欢这样的事实，我必须在页脚上方放一个“假段落”，以防止页面内容滚动到页脚后面。感觉不像是一个干净的解决方案。
在您的页脚的CSS，替换width:100%用right:0
或保留并添加 box-sizing:border-box
在您的原始代码中，基于元素的边界和填充，仅宽度为100％的框太宽。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句