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>

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

第二个问题本身并不是一个问题，但我不喜欢我必须加入一个假的段落＆＃34;在页脚上方简单地防止页面内容在页脚后面滚动。它不像一个干净的解决方案。

Answer 1

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

<强> jsFiddle example

或保留，然后添加box-sizing:border-box

<强> jsFiddle example

在原始代码中，根据元素的boder和padding，单独100％宽度的框太宽。

Answer 2

如果你看这个小提琴：

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

你会看到我在你的内容周围添加了一个包装器，与页脚分开。我还添加了一个CSS类“页脚”，并在提供的样式表中放置了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
}

如何解决问题的方法是将底部填充应用于正文或作为内容父级的其他标记。填充应该等于页脚的高度，以使滚动条不会超过主体的整个高度。

Answer 3

将此添加到您的页脚：

＆＃13;

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

＆＃13;

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

HTML页脚由ScrollBar隐藏

3 个答案: