css - 页面中间相对 Div 之外的绝对底部

Question

我已经搜索并尝试了多个修复程序(其中大部分是我在堆栈溢出中找到的，还有一些来自其他网站，如 CSS Tricks 和 matthewjamestaylor.com)，但对我来说没有任何效果。 (固定位置可行，但不是一种选择。)我需要将页脚留在底部，但现在它在中间。

在这个阶段，我假设我的编码中的某些东西对我不利，但我也尝试过删除样式/div，但它仍然让我感到困惑。也许我只是需要一个全新的视角。

The JSFiddle code is here. The FULL JSFiddle code is here. (如果有人需要的话)

提前致谢!


<code>#footer {
position:absolute;
bottom:0px;
width:100%;
height: 130px;
-webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
-moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
font: bold 18px/1.2em sans-serif;
z-index: 400;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(http://informationsecured.com/chapelhill/images/background-green.jpg);
background-repeat: no-repeat;
background-position: center top;}</code>


Answer 1

在布局中使用大量绝对位置通常不是一个好主意。您失去了让浏览器完成与其内容相关的元素高度的繁重工作的机会。

为了让您的#footer 留在底部，我们需要做一些事情:

• body 不应有 height: 100%;。否则，相对于底部定位的每个元素都将根据浏览器窗口可见内容的高度进行定位(看起来像 position: fixed;，直到您滚动然后元素随内容移动).
• #wrapper 不应有 position: absolute;。我们不知道它的最终高度，所以最好保持相对，以帮助将页脚定位在它的正下方。

作为一般准则；如果您正在计算像素值偏移量以防止元素相互重叠，那么您可能做错了什么。

jsFiddle