我在这里和其他地方环顾四周寻找类似的问题,但我似乎无法找到明确的答案.当我向页面添加足够的文本以进入页脚时,页脚只是重叠文本.如果我减小浏览器窗口的大小以强制页脚和容纳内容的容器满足,则同样如此.偶尔,这也表现在“容器”又称浅灰色部分,由于某种原因收缩,即使它应该总是占据高度的100％.
这种东西让我整晚都在熬夜,所以我的想法并不是很清楚.我确信这是一个愚蠢而且易于修复的东西,但我不是一个专业的设计师,我当然不知道问题是什么.
下面是我的CSS,以及我用页面的所有相关部分制作的JSFiddle.
html,body {
margin: 0;
padding: 0;
}
html,body {
background: #252525;
font-family: Arial,Helvetica,sans-serif;
height: 100%;
text-align: center;
}
body {
background: #363636;
border-left: 1px solid #111;
border-right: 1px solid #111;
margin: 0 22.5%;
}
#container {
color: white;
margin-bottom: 2em;
min-height: 100%;
overflow: auto;
padding: 0 2em;
text-align: justify;
}
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed;
font-size: small;
width:100%;
}
解决方法
改变这个：
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: relative; //changed to relative from fixed also works if position is not there
font-size: small;
width:100%;
}
