创建可变高度“固定"带有可滚动内容的 CSS 标头 [英] Creating a variable height "fixed" header in CSS with scrollable content

问题描述

我想在页面上创建一个在您滚动页面时不会移动的页眉.

I'd like to create a header on the page that doesn't move when you scroll the page.

这看起来很简单，只需在样式中添加位置:固定"，但随后内容会出现在标题下方，因为标题已从流程中移除".所以我认为的解决方案是在内容中添加margin-top:height".

This seems simple, just add "position: fixed" to the style, but then the content appears underneath the header, because the header is "removed from the flow". So the solution I think is to add "margin-top: height" to the content.

当标题的高度可变时，解决此问题的最佳方法是什么?

Whats the best way to solve this when the height of the header is variable?

我有一个演示问题的小提琴:

I've got a fiddle that demonstrates the problem:

http://jsfiddle.net/waterlooalex/j4Z8F/2/

如果你的浏览器窗口不是太大，内容文本会在'hello world header'下方滚动，问题是第一行文本Lorem ipsum..."被隐藏了.我有一些评论解决这个问题的 javascript.

Providing your browser window is not too large, the content text will scroll below the 'hello world header', the problem is that the first line of text "Lorem ipsum...' is hidden. I've got some comment out javascript that works around the issue.

推荐答案

您可以添加 not 修复的标题 div 的第二个副本，并使用类似 visibility:hidden 就可以了.这样，它将内容推送到您需要的确切位置，但不使用 JavaScript.有点骇人听闻，但我在你的小提琴中试过了，它可以工作.

You could add a second copy of the header div that's not fixed and use something like visibility:hidden on it. That way it pushes the content down to the exact spot you need, but without using JavaScript. Kinda hackish but I tried it in your fiddle and it works.

这篇关于创建可变高度“固定"带有可滚动内容的 CSS 标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！