为什么我不能在css中创建一个有效的页脚?

时间:2011-02-03 21:54:12

标签: html css footer

http://cssdesk.com/kBNHh

好的,所以有我的css + html。

问题在于页脚。不知道如何工作。

谁能告诉我我做错了什么?

此外,如果我在div中插入太多文本,我仍然会得到文本(在div中称为子2,即文本主体)与页脚重叠的内容。为什么我不能阻止任何重叠页脚?我已经尝试将页脚放在包装器(字段)之外,我已经尝试了一切。但是当你有太多的时候,文本就会与页脚重叠。我应该再次尝试填充吗?编辑:不,仍然无效。

页脚被称为Child 4(即使它不是“field”的子项,也就是我的html中的主要包装器。)

我去过几个网站,有很多细节。甚至试过那里提供的一些css。但是一旦我编辑它以适合我的计划,页脚就会停止运行。我做错了什么?

1 个答案:

答案 0 :(得分:1)

问题是您使用的是名为absolute的定位格式。这意味着每个div都使用您定义的坐标精确定位在屏幕上,其他div(也是绝对定位的)不会影响任何其他div的位置。

如果你使用position:relative而不是position:absolute,那么它可能会让你沿着正确的方向前进。

阅读其中一些内容,他们可能会有所帮助:

http://www.communitymx.com/content/article.cfm?page=2&cid=3B56F

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

我不知道您的网页看起来是什么样子,但从这个基本想法开始并围绕它构建您的技能:)

#Header, #Content, #Footer{
  position:relative;
  width:100%;
}

#Header{
  height:100px;
  background:yellow;
}

#Content{
  height:400px;
  background:green;
}

#Footer{
  height:100px;
  background:blue;
}

并且html将是

<body>
 <div id="Header">Put your header stuff here.</div>
 <div id="Content">Put your content here.</div>
 <div id="Footer">Put your footer stuff here.</div>
</body>

将孩子放在正确的部分内,并将他们的位置设置为亲戚。

玩这些并看看你如何相处。花费尽可能多的时间来真正理解定位,一旦你将它作为一个坚实的基础,你会发现设计更容易!

对不起,如果我不够具体,我相信SO上的其他一些好人会加入这个并且如果他们有任何建设性的东西可以帮助你:)