CSS 问题 - 页脚太长？答案

【问题标题】：CSS issue - footer goes too long?CSS 问题 - 页脚太长？
【发布时间】：2015-10-30 09:36:22
【问题描述】：

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

所有现代浏览器（Safari、Chrome、IE 和 Firefox）的问题都是一致的。

在此处发布的 CSS 过多，但 Firebug 或查看源代码会显示相应的样式。任何帮助将不胜感激。

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

【问题讨论】：

你能说得更具体点吗？我看到一个带有一些内容的浅灰色页脚。浅灰色流到页面底部？你要什么在哪里？浅灰色底部的文字是？浅灰色区域不会那么大吧？截图会有很大帮助 =)。
页脚大小是个问题。它在任何浏览器上都是 693px 高。我只想让页脚填充到浏览器窗口的底部，不管它有多大。
imgur.com/XOC6c - 这是高度设置为 150 像素的页面截图。我希望页脚在较大的浏览器上将页面的其余部分扩展到底部。不知道为什么它不起作用。

标签： html css sticky-footer

【解决方案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%，这意味着它们占据了整个屏幕。页面使用与页脚相同的背景颜色。最后，我们将 header 和 bodycontent 设置为具有黑色背景，以便它们掩盖 Page 的灰色。

【讨论】：

我喜欢你的想法。我也在考虑使用背景来解决这个问题。问题是该页面上有透明的 png 以及需要显示的条纹背景。
然后你需要把它包起来。或者使用javascript。 CSS 不够聪明，无法按原样做你想做的事。所以将page 放在另一个包装器中，这个包装器具有灰色背景，然后将您的样式背景应用于页面。如果您需要整个主体具有样式背景，那么我认为您在 CSS 方面不走运。
超级黑客奖授予 T. Sherman 先生！谢谢你的提示。不是我正在寻找的理想解决方案，但它有效。在我测试过的所有浏览器中。再次感谢。

【解决方案2】：

在页脚上指定 100% 的高度并不是您认为的那样。您告诉它您希望高度为身体的 100%，它不仅仅是“扩展以填充”剩余空间。它实际上是 100% 的高度，加上您添加的所有其他内容。它达到了 150 像素甚至更多的最小高度。

【讨论】：

我尝试将其设置为自动，但它不会流到屏幕底部。

【解决方案3】：

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

body > #page {
height: 100%;
}

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

【讨论】：

我尝试将其设置为自动，但它不会流到屏幕底部。谁能在大分辨率显示器上确认这一点。
我已对我的答案进行了一些更改，请也尝试一下。
@#footer: remove-> 属性 top:0;添加-> 属性底部：0；这段代码弄乱了我的css的其余部分。它需要以某种方式格式化吗？也许在括号中？
我认为我写它的方式让你感到困惑，这不是我刚才提到的删除顶部位置并在你的 css 中的#footer 处添加底部位置，
哦，我知道了。以前试过。虽然不起作用。使用这两个包装器的组合，我能够让它工作。

【解决方案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%;
 }

【讨论】：