问题描述
我正在尝试为我的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:
https://dl.dropboxusercontent.com/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;
}
- 演示 https://rawgit.com/rofrol/reveal.js/fixed_header/
- 代码 https://github.com/rofrol/reveal .js/blob/fixed_header/index.html#L411
- 讨论 https://github.com/hakimel/reveal.js/issues/1312 https://github.com/hakimel/reveal.js/issues/180
- Demo https://rawgit.com/rofrol/reveal.js/fixed_header/
- Code https://github.com/rofrol/reveal.js/blob/fixed_header/index.html#L411
- Discussion https://github.com/hakimel/reveal.js/issues/1312 https://github.com/hakimel/reveal.js/issues/180
这篇关于位置:固定在reveal.js中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!