CSS：页脚内容重叠，其他故障

Flawedspirit 发表于 Dev

精神错乱

我到处和其他地方都在寻找类似的问题，但似乎找不到确切的答案。当我在页面上添加足够的文本以使其到达页脚时，页脚仅会与文本重叠。如果我减小浏览器窗口的大小以强制页脚和容纳内容的容器，也是如此。有时，这也表现为“容器”，也就是较浅的灰色部分，由于某种原因会收缩，即使它始终占据了高度的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%;
}

演示版

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。