【问题标题】:Header and footer with fixed position while content is scrollable?内容可滚动时具有固定位置的页眉和页脚?
【发布时间】:2013-08-13 17:44:00
【问题描述】:

我正在尝试创建一个网站,其中页眉和页脚具有固定位置,而内容在中间滚动。

<header style="position:fixed"></header>
<div id="content">some content</div>
<footer style="position:fixed"></footer>

我创造了我认为可行的东西,但它没有。这是jsFiddle 的全部内容。 如您所见,部分内容隐藏在页脚下方(最后我看不到“HELLOWEEN”)。我必须改变什么来修复它?谢谢

【问题讨论】:

  • 那个小提琴在 Chrome 上对我有用。我将第一行更改为“Home 1”,当滚动条移到顶部时,它出现在红色条下方。

标签: html css css-position


【解决方案1】:

最简单的解决方法是添加与静态页眉和页脚高度相等的填充:

#content {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
}

JSfiddle

【讨论】:

  • 就是这样,非常感谢
  • @MichalArtazov 乍一看,这看起来像是解决方案,直到您滚动内容。滚动条与标题重叠,这是不理想的,因为标题不滚动。应该是内容部分本身只有滚动条,页眉和页脚没有滚动条。请参阅 peterchon 解决方案提供的JSFiddle
【解决方案2】:

http://jsfiddle.net/yASFU/

<header>header</header>
<section>
    <div class="push">push</div>
</section>
<footer>footer</footer>

html, body {height:100%; margin:0; overflow:hidden;}
header, footer {display:block; background-color:black; height:10%;}
section {height:80%; background-color:lightblue; display:block; overflow:auto;}
section .push {height:4000px;}

【讨论】:

  • 这是一种方法,但不适合我的情况,反正thanx
【解决方案3】:
  1. 移除页眉和页脚的位置样式
  2. 为内容设置高度
  3. 在内容中添加样式overflow-y:auto

如果您希望内容高度与浏览器窗口匹配(减去页眉和页脚),请使用 javascript 进行设置(并根据窗口调整大小事件进行调整)

【讨论】:

  • 也是一个有趣的解决方案,但不适合我的情况,反正thanx
猜你喜欢
  • 2011-05-03
  • 1970-01-01
  • 2018-05-19
  • 2012-05-27
  • 1970-01-01
  • 2017-05-09
  • 2017-01-20
  • 2015-03-12
相关资源
最近更新 更多