HTML/CSS问题

Question

HTML/CSS问题

4

我有一个网站，其结构如下:

<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
<div id="footer"></div>
</div>

现在我已经在CSS中将html、body和page_wrapper设置为100%。这里的目标是让页脚在内容底部或窗口底部——视觉上较低的位置。我读了很多关于如何做到这一点的东西，但似乎无法正确地实现它。

html, body, #page_wrapper { height: 100%; }

#page_wrapper {
width: 864px;
margin: 0 auto;
min-height: 100%;
background: url('path/to/image') repeat-y;
}

#content-wrapper {
position: relative;
width: 824px;
min-height: 100%;
margin: 0 auto;
}
#footer, #header {width: 824px; margin: 0 auto; }
#footer {
border-top: 4px solid #000;
position: relative;
margin-top: -7.5em;
}

看起来好像有用。但我发现一个问题，如果我缩小页面，page_wrapper的高度似乎会重置为100％，但是当我放大时，它会变得越来越短，导致页脚和内容文本重叠而不是将页脚向下推。

你有什么想法如何解决这样的问题？我已经试过谷歌寻找答案了，但是毫无头绪...

- Justin

3个回答

1

这个有帮助吗：在ASP.NET页面中使用CSS实现sticky footer 将页脚div绝对定位...

- FiveTools

1

在 #footer 的 CSS 中尝试添加 clear:both;

或者

在 position: relative; bottom:5px; 之后添加 footer 的 CSS

使用 position: relative，您实际上可以使用 top、right、bottom 和 left。

如果您希望它始终位于底部，则可以将其放置在 bottom:5px; 如果您希望它位于底部中心，则可以将其放置在 bottom:5px; right 或 left...

上面的 5px 只是一个示例，您可以将像素更改为任意数量。

此外，您还可以在其中添加 clear:both，因为该 clear 可确保没有其他内容会覆盖它。

- Adnan Bhatti

我刚试了一下，但它没起作用。它会把内容直接放在我的内容后面，而不是对齐到页面底部，如果内容太短无法填满整个页面的话。 - Justin

在position: relative;之后的页脚CSS中添加bottom:5px;。 - Adnan Bhatti

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben · Accepted Answer

我更新了我的回答，并提供了一个测试的html文件，在Chrome 13中效果非常好。我试着放大和缩小页面，页脚也保持原位置。

你应该把页脚放在页面外部，然后给它一个与页脚高度相等的负边距。你可以改变页眉或内容包装器的高度来看到页脚粘在页面包装器底部而不是浏览器窗口。如果你按照现有的html文件打开，你会看到蓝色的页脚粘在页面底部，而页面包装器占据了整个窗口100%的宽度。

请注意，在Firefox 4和5中没有修复这个问题，也不支持IE 5.5及更早版本。

要使此功能在IE6中正常工作，请将height: 100%;添加到#page_wrapper中。

<html>
  <head>
    <style type="text/css">
    body, html {height: 100%;margin:0;padding:0;}
    #page_wrapper {min-height: 100%; background-color: red;}
    #header{height: 200px; background-color: green;}
    #content-wrapper{height: 200px; background-color: yellow;}
    #footer {height: 7.5em;margin-top: -7.5em; background-color: blue; position:relative;}
    </style>
  </head>
  <body>
    <div id="page_wrapper">
      <div id="header"></div>
      <div id="content-wrapper"></div>
    </div>
    <div id="footer"></div>
  </body>
<html>

可以在以下网址找到实时示例：

https://www.effacts.com/effacts/public?context=107

正确的表格和HTML代码可以在此处找到：

http://www.cssstickyfooter.com/