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

问题描述

我想在页面上创建一个不移动的标题。

这看起来很简单，只需添加position：fixed 到样式，但是内容显示在标题下，因为标题是从流中删除。所以解决方案我认为是添加margin-top：height的内容。

当标题的高度是变量时，最好的解决方法是什么？

显示问题的小提琴：

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

提供您的浏览器窗口不会太大，内容文字会滚动到hello world header第一行文本Lorem ipsum ...被隐藏，我有一些注释掉的javascript，工作围绕这个问题。

解决方案

您可以添加头部div的第二个副本不固定，并使用 visibility：hidden 方式它将内容推送到您需要的确切地点，但不使用JavaScript。Kinda hackish但我尝试它在你的小提琴，它的工作原理。

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

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/

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.

解决方案

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屋！