设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 数据 手机
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – CSS:页脚重叠内容,其他故障

发布时间:2021-01-01 02:17 所属栏目:34 来源:网络整理
导读:
导读:我在这里和其他地方环顾四周寻找类似的问题,但我似乎无法找到明确的答案.当我向页面添加足够的文本以进入页脚时,页脚只是重叠文本.如果我减小浏览器窗口的大小以强制页脚和容纳内容的容器满足,则同样如此.偶尔,这也表现在“容器”又称浅灰色部分,由于某种原

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

(编辑:ASP站长网)

    网友评论
    推荐文章
      热点阅读