粘性页脚问题-Java 学习之路

我试图从我在网上找到的一个简单的教程创建一个粘性页脚 . 这似乎工作正常，直到我尝试在我的内容div上加宽，我不明白为什么 .

如果我在内容div中添加一个宽度，那么页脚似乎不再与内容div之间有任何距离，因此如果内容很多，它会使内容模糊不清 .

我已经创建了这个jsfiddle，但它看起来并不像在firefix或IE中查看那样明显 .

有没有人知道为什么会这样，我该怎么做才能有一个固定宽度的内容div和自动边距使其居中但是如果几乎没有任何内容或大量的话，仍然有一个始终坚持到底部的页脚内容 .

下面是我对内容div的css：

#content {
                margin-top: 15px;                   
                padding-bottom:100px; /* Height of the footer element */
                border-left: 1px solid #C9C9C9;
                border-right: 1px solid #C9C9C9;
                border-bottom: 2px solid #C9C9C9;                    
                box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;                    
                width: 1024px; /* Here adding a width causes the footer to overlap */
                margin-left:auto;
                margin-right:auto;
                background-color: white;
                text-align: center;
                border: 1px solid red;
            }

http://jsfiddle.net/32M9Q/1/

3 回答

0

至少在Chrome中，JSFiddle对我没有任何问题 . 无论是否在内容上加宽，它看起来都是一样的 . 我甚至添加了更多的单词，页脚仍然没有删除任何东西 . 所以 padding 确实有效，至少在我的情况下 .

但是，根据你在另一个答案中所说的，也许你可以将页脚上的 position:absolute 更改为 position:relative （假设页脚赢了't have anything placed under it...and I'猜测不是因为它是页脚） . 它确保将页脚放在内容之后而不是放在其上 . 但要小心，并确保在许多不同的情况下（浏览器和设备）检查它 .

我还会在内容中包含 margin-bottom ，以防万一 .

回复于 2024-04-29T09:58:01+08:00
1
尝试将以下CSS规则添加到#footer元素：
```
position: fixed;
clear: both;
```
这将为您提供一个粘性页脚（如果我有你想要做的正确），它与主要内容不重叠 . 你可以放松一下：两者兼而有之，但它可能对某些浏览器有帮助......
回复于 2024-04-29T09:58:01+08:00
0
设置我的网页的背景颜色以匹配页脚和身体不是一个选项，我很欣赏我到目前为止给出的所有答案，但不幸的是它们都不适合我 .

我必须做我认为是一个黑客，它在内容之下加一个高于页脚的div，这意味着页脚位于这个div的顶部而不是我的内容给出了内容和内容之间的空间错觉 . 页脚：
```
<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>
```
回复于 2024-04-29T09:58:01+08:00

粘性页脚问题

3 回答

相关问题