html文件内容重叠,html – CSS：页脚重叠内容,其他故障

我在这里和其他地方环顾四周寻找类似的问题,但我似乎无法找到明确的答案.当我向页面添加足够的文本以进入页脚时,页脚只是重叠文本.如果我减小浏览器窗口的大小以强制页脚和容纳内容的容器满足,则同样如此.偶尔,这也表现在“容器”又称浅灰色部分,由于某种原因收缩,即使它应该总是占据高度的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%;

}