位置:固定在reveal.js中

本文介绍了位置:固定在reveal.js中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试为我的reveal.js演示文稿制作一个标头，该标头粘贴在屏幕顶部.标头中的内容是按幻灯片动态显示的，因此我必须将标记放置在section标签中.

I am trying to make a header for my reveal.js presentation that sticks to the top of the screen. The content in the header is dynamic on a per-slide basis, so I have to place the markup within the section tag.

如果标记位于section标记内，则position:fixed显然不能在reveal.js中提供令人满意的结果.我不能真正弄清楚为什么会这样，但是我在github存储库中找到了一些信息，建议设置演示文稿大小以适合视口大小:

Apparently position:fixed does not really provide satisfying results in reveal.js if the markup is within the section tag. I can't really make out why that is exactly, but I found some info in the github repo suggesting setting the presentation size to fit the viewport size with:

Reveal.initialize { ... width: '100%', height: '100%', ... }

但是它仍然对我不起作用-似乎演示文稿并未真正受到上述影响.这是一个演示:

But it still doesn't work for me - it seems the presentation is not really affected by the above. Here is a demo:

dl.dropboxusercontent/u/706446/_linked％20stuff/reveal.js/index.html

有什么办法解决这个问题吗?

Any ideas how to solve this?

推荐答案

将此添加到CSS:

.reveal.slide .slides > section, .reveal.slide .slides > section > section { min-height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; position: absolute !important; top: 0 !important; align-items: center !important; } section > h1, section > h2 { position: absolute !important; top: 0 !important; margin-left: auto !important; margin-right: auto !important; left: 0 !important; right: 0 !important; text-align: center !important; } .print-pdf .reveal.slide .slides > section, .print-pdf .reveal.slide .slides > section > section { min-height: 770px !important; position: relative !important; }

• 演示 rawgit/rofrol/reveal.js/fixed_header/
• 代码 github/rofrol/reveal .js/blob/fixed_header/index.html#L411
• 讨论 github/hakimel/reveal.js/issues/1312 github/hakimel/reveal.js/issues/180
• Demo rawgit/rofrol/reveal.js/fixed_header/
• Code github/rofrol/reveal.js/blob/fixed_header/index.html#L411
• Discussion github/hakimel/reveal.js/issues/1312 github/hakimel/reveal.js/issues/180