Позиция: исправлено в show.js

Я пытаюсь сделать заголовок для моей презентации opens.js, которая придерживается верхней части экрана. Содержимое в заголовке динамическое на основе каждого слайда, поэтому я должен поместить разметку в тег раздела.

По-видимому, фиксированное положение не обеспечивает удовлетворительных результатов в show.js, если разметка находится в теге раздела. Я не могу понять, почему это точно, но я нашел некоторую информацию в репозитории github, предлагая установить размер представления, чтобы он соответствовал размеру видового экрана:

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

Но это все еще не работает для меня - похоже, на презентацию это не влияет. Вот демонстрация:

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

Есть идеи, как это решить?

Ответ 1

Добавьте это в 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 li >

Ответ 2

В конце вашего main.html добавьте:

Reveal.initialize({ center: false, })