footer始终在底部…DIV+CSS

今天做fansipan的网站,弄了两个小时才把footer最终在不遮盖内容的前提下固定在底部。

要做到
  1. css里把body 和 html的height设为100%。
  2. 在最外层的wrapper里把min-height属性设为100%!不是height属性,这是因为如果#content中的内容如果增加了,他的高度超过了浏览器窗口的高度,那么如果把#wrapper的高度仍然是100%,就会导致#footer仍然定位在浏器窗口的下端,从而遮盖了#content中的内容。而使用min-height属性的作用就是使#wrapper的高度“至少”为浏览器窗口的高度,而当如果它里面的内容增加了,他的高度会也跟随着增加,这才是我们需要的效果。
  3. 接下来,将#wrapper设置为相对定位,目的是使他成为它里面的#footer的定位基准
  4. 然后把#foooter设置为绝对定位,并使之贴在#content的最下端。
  5. 如果当我们把#footer贴在#wrapper的最下端以后,他实际上已经和上面的#content这个div重叠了,为了避免覆盖#content中的内容,我们在#content中设置了下侧的padding,使padding-bottom的值等于#footer的高度,就可以保证避免覆盖#content的文字了

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s