reveal.js中的position:fixed

Question

reveal.js中的position:fixed

18

我试着制作一个能够固定在屏幕顶部的reveal.js演示文稿标题。标题中的内容根据每个页面动态变化，因此我必须将标记放置在section标签内部。

显然，如果标记位于section标签内部，则使用position:fixed无法提供令人满意的结果。我无法确切地说明原因，但我在github存储库中找到了一些信息，建议使用以下方式设置演示文稿大小以适应视口大小：

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

但这对我仍然不起作用-似乎演示文稿并没有受到上述内容的影响。这是一个演示：

https://dl.dropboxusercontent.com/u/706446/_linked%20stuff/reveal.js/index.html

有什么解决办法吗？

- zkwsk

没有想法。但我想做相反的事情（在左下方放置一个块），我同样感到沮丧。 - Amanda

这是我提到的Github上的线程，但我甚至无法使展示充满整个视口：https://github.com/hakimel/reveal.js/issues/857 我仍然没有实现这一点，但我的计划是在幻灯片中放置一些文本，然后在加载时使用JavaScript将其移出幻灯片。 - zkwsk

2个回答

5

在您的main.html文件末尾添加以下内容：

Reveal.initialize({
center: false,
})

这将初始化一个名为"Reveal"的对象，并设置中心属性为false。

- btReel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rofrol · Accepted Answer

将以下内容添加到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;
}