【问题标题】:Scrolling Content while Header/Footer Remains Stationary在页眉/页脚保持静止时滚动内容
【发布时间】:2012-05-09 18:36:49
【问题描述】:

我有一个网站,其中页眉/页脚在内容滚动时保持静止在屏幕的顶部/底部。我一直在关注this question,它解释了如何实现这种对我有用的效果。当您向下滚动内容时,您会注意到内容的背景图像被切掉了。我很困惑为什么会发生这种情况,因为我已将背景图像设置为repeat-y。我还注意到页脚似乎也隐藏了一些内容。

为了实现这种仅内容的滚动效果,我在页眉/页脚中添加了position: fixed;。我将内容保留为position: absolute;,以使页脚固定在屏幕底部。

->Link to website

【问题讨论】:

  • 除非内容背景应该移动,否则您也可以尝试将其固定到位:background: url(../img/body.png) 160px 0 fixed;
  • 仅供参考,在我的屏幕上,页脚距离屏幕底部大约 30 像素。
  • 我想让内容背景移动:)
  • @JakeParis 你用的是哪个浏览器?
  • FFx...哎呀,是时候再次更新版本了!那里。火狐12.0

标签: html css


【解决方案1】:
  1. 首先,将bottom: 0 添加到您的页脚。这将使它下降到触底。
  2. 现在,将position: absolute 关闭#content
  3. 最后,在#content 的顶部和底部添加额外的填充,这样您的文本就不会隐藏在页眉/页脚后面。

Firebug 告诉我这将解决您网站上的问题。 Ask him yourself.

【讨论】:

  • 你的意思是像height: 250px吗?问题是我不会知道每一页内容的高度。
  • 那种工作。如果我将页面内容缩短到几行,则背景图像不会一直平铺到页脚。
  • 酷。从来不知道这个标签的存在。由于我不知道每个用户屏幕的min-height,我将考虑使用 JavaScript 添加min-height。还是有更好的处理方法?
  • 只需添加一个至少对大多数人来说足够大的最小高度。我有一个1680 x 1050 屏幕,450px 对我来说足够大了。
  • 我试过了,但这意味着滚动条比窗口高度小于 1050 时需要的大。
猜你喜欢
  • 2023-03-28
  • 2011-05-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-07-03
  • 1970-01-01
  • 2015-10-22
  • 1970-01-01
相关资源
最近更新 更多