CSS/HTML - 滚动问题时浮动 DIV

Question

我遇到了一个看似简单的问题，但无法完全解决这个问题。我正在使用 bootstrap 版本 3 来创建我的基本布局。我有一个页脚需要位于页面底部，所以我将其设置为 position: absolute; bottom: 0;，如果我缩小，效果很好。当内容开始变得冗长时，它会创建垂直滚动条，当滚动时 DIV 会浮动而不是停留在底部。

我试着给容器一个 position: relative; 但剂量似乎无能为力。有人有什么想法吗？

这是我的布局示例，如果您调整预览部分的大小以强制使用垂直滚动条，您会看到当您滚动时 DIV 会四处浮动而不是停留在原地。

https://jsfiddle.net/DTcHh/10301/

Answer 1

试试 fixed

.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

js fiddle example

Answer 2

非固定，见下：

你的问题是（据我所知）页脚根据内容浮动，你希望它留在你调用它的地方。

.footerElement { 
    // base styles all styles
    display: inline-block; // add this, does as you imagine
}

"Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box" -W3schools

滚动条，见下：

至于有滚动条解析的元素

.elementwithScrollbar { 
      // base styles all styles
      overflow:hidden; // or use overflow-y:hidden; or x
}

已修复，见下：

如果你想修复它；添加 position: fixed; 和值坐标应该是您在那里要做的所有事情。（即 position:fixed；以及您想要的位置）

"Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page." -MDN

Answer 3

使用 fixed 只会将其锚定到屏幕底部，而不管您正在查看页面的哪一部分。我认为您希望页脚位于页面底部，而不是一直位于屏幕底部。

要修复，请在此处修改拼写错误：

.contrainer-fluid {                  <-- should be container
position: relative;
}

CSS/HTML - 滚动问题时浮动 DIV

CSS/HTML - Floating DIV when I scroll issue

html

javascript

css

scroll

twitter-bootstrap