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%;
}

A mockup of a typical page.

解决方法

#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%;
}

Demo

（编辑：上海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!