Question

我在这个网站上的页脚有点问题。无论分辨率如何，我都希望它具有设定的最小高度并流向页面底部。有点像一个粘性的页脚，但我希望它与它上方的容器div的末端对接。

这个问题在所有现代浏览器（Safari，Chrome，IE和Firefox）中都是一致的。

要发布的CSS过多，但Firebug或视图源会显示相应的样式。任何帮助都会非常感激。

http://034732e.netsolhost.com/gdlsk_joomla/

Answer 1

感谢截图。你的描述现在更有意义。我会做以下事情。现在你有类似

的东西

<body>
  <page>
     <header />
     <bodycontent />
  </page>
  <footer />
<body>

我会考虑这样的事情

<body height: 100%;>
    <page height: 100%; background: gray;>
      <header background: black; />
      <bodycontent background: black; />
      <footer />
    </page>
<body>

基本上我们所做的是将正文和页面设置为100％，这意味着它们会占据整个屏幕。页面使用与页脚相同的bg颜色。最后，我们将header和bodycontent设置为黑色背景，以便它们掩盖Page的灰色。

Answer 2

在页脚上指定100％的高度并不是您所想的那样。你告诉它你想要高度为身体的100％，它不仅仅是“扩展以填充”剩余的空间。它实际上是100％的高度，加上你添加的其他东西。它实现了150px甚至更高的最小高度。

Answer 3

在你的css中试试这个改变：

body > #page {
height: 100%;
}

@#footer: remove-> property top:0;
add-> property bottom:0;

Answer 4

我遇到了类似的问题，应该是这样的：

HTML

<footer id="wrapper" class="main_footer">
    <nav>
      <a href="#">A</a>
      <a href="#">B</a>
      <a href="#">C</a>
   </nav>
</footer>

CSS

#wrapper {
 position: absolute;
 width: 100%;
 }

CSS问题 - 页脚太长了？

4 个答案: