Reveal.js: Vertically fill screen 100%?

Created on 15 Oct 2012 · 32Comments · Source: hakimel/reveal.js

I have been playing with the CSS for this for days upon days now and have yet to be able to get the slides to fill the screen vertically. I tried adding a #reveal and .reveal in the css and sizing that, didn't work. I tried adding attributes to .reval .slides, couldn't get that to work.

Has anyone been able to fill the vertical screen size 100%?

question

Source

kapelskic

Most helpful comment

This works for me:

Reveal.initialize({
  center: false
});

.reveal .slides > section.present, .reveal .slides > section > section.present {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
}
section > h1 {
  position: absolute !important;
  top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
}

.print-pdf .reveal .slides > section.present, .print-pdf .reveal .slides > section > section.present {
  min-height: 770px !important;
  position: relative !important;
}

rofrol on 21 Jan 2016

👍7

All 32 comments

Here's how to do it: have the following CSS rules in your theme customizations, a CSS file you load after reveal.css and the theme CSS:

.reveal .slides {
  height: 100%;
  top: 0;
  margin-top: 0;
}

.reveal .slides>section {
  min-height: 90%;
}

.reveal .slides>section>section {
  min-height: 100%;
}

dandv on 15 Oct 2012

👍2

I added it to default.css since that is what we are using, but it didn't seem to do much. It just moved the whole presentation from the middle of the screen to the top with like 20px or so of padding between the top of the section and the top of the page. On top of that the actual section size didn't seem to change at all....

kapelskic on 15 Oct 2012

Try a separate file (so you're sure the CSS rules are overridden correctly). Also try the zoom transition and the beige theme, so the top margin doesn't appear visible. This setup works for me (I've just tested).

dandv on 15 Oct 2012

I could never get this to work no matter what file I put the above code in.

kapelskic on 17 Oct 2012

I tried adding the styles that @dandv suggested via the Chrome dev tools and they do make the slides take up 100% of the page height. I you might be adding the styles at a point where they are overridden by the default reveal.js styles.

Try putting them in a new css file that is included after the reveal.css and theme CSS. If that doesn't work, you can hack it with !important.

hakimel on 24 Oct 2012

I tried putting the additional css file in and the css DID make changes however it wasn't 100% correct. Do you think this is because in our file we have overview disabled and thus zooming is conflicting with the CSS?

It seems to me that if you disable overview and use the zooming it messes up a TON of functionality. Any suggestions?

kapelskic on 1 Nov 2012

The above CSS does not work for me: it moves the slides past the top of the screen! Replacing top: 0; with e.g. top: <some percent>%; works, but the right value of <some percent> depends on how wide my browser window is.

I'm looking for a consistent way to do this, so that I can test it on my computer and have it also work when I'm projecting the slides.

ntc2 on 13 Feb 2014

@ntc2 Same Here. Slides went up over the ceiling.

edoson on 14 Feb 2014

Also, I cant seem to be able to change the height in 'cube' transition mode, no method helped so far.

edoson on 14 Feb 2014

@ntc2 and anyone else having this problem, you can solve the top:0 issue by adding top: auto; to the selector .reveal .slides>section in your theme (following @dandv's advice)

.reveal .slides {
  height: 100%;
  top: 0;
  margin-top: 0;
}

.reveal .slides>section {
  min-height: 90%;
  top: auto;
}

.reveal .slides>section>section {
  min-height: 100%;
}

hanleybrand on 2 May 2014

@hanleybrand: thanks! I am using Pandoc to generate the slides, which inserts the conflicting (I guess) default reveal.css. But, adding !important everywhere makes it work:

.reveal .slides {
  height: 100% !important;
  top: 0 !important;
  margin-top: 0 !important;
}

.reveal .slides>section {
  min-height: 90% !important;
  top: auto !important;
}

.reveal .slides>section>section {
  min-height: 100% !important;
}

ntc2 on 20 May 2014

👍2

The above CSS still does not work for me when I have a nested sections. For slides with a nested section it again moves the slides past the top of the screen.
Any suggestions ?

larsplaul on 7 Jun 2014

@larsplaul I had the same problem. Adding a 'top: auto !important;' to the reveal .slides>section>section worked. Like so:

.reveal .slides {
  height: 100% !important;
  top: 0 !important;
  margin-top: 0 !important;
}

.reveal .slides>section {
  min-height: 90% !important;
  top: auto !important;
}

.reveal .slides>section>section {
  min-height: 100% !important;
  top: auto !important;
}

zachary-foster on 22 Aug 2014

when I use any of these solutions with the solarized theme on chromium, the slide content starts above the screen :cry:

fommil on 16 Nov 2014

I think this has something to do with all the *.css files. for example. there is a reset_revel.css that coms in ad replaces values. Still can't find the correct values so slideshow resizes based on screen resolution and I can't get rid of that horrid border.

lla4um on 25 Mar 2015

I too just blew a couple of hours trying to get slide titles and images near the top of the slide...
All of the solutions above were causing the "over the top" symptom that others have reported.
Then I noticed that my slides look okay if I shrink my browser window down pretty small...

The cause of my "too far from the top" issue turned out to be a combination of:

I use a large 30" monitor: 2560x1600
I had my slides set for a "native resolution" of 800x600 (crappy projector rez; although the default is 960x700, so not much more)
The default value for maxScale is 1.5.

So if my browser window was nearly full screen, I was exceeding the maxScale, so the slide wasn't being scaled up any more, and the "extra space" was going to the top of the slide, not the bottom as I would have expected.

Solution: maxScale: 10.0

There's 3 hours I'll never get back. Hope this saves you at least 2.

vsivsi on 16 Nov 2015

This works for me:

Reveal.initialize({
  center: false
});

.reveal .slides > section.present, .reveal .slides > section > section.present {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: absolute !important;
  top: 0 !important;
}
section > h1 {
  position: absolute !important;
  top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
}

.print-pdf .reveal .slides > section.present, .print-pdf .reveal .slides > section > section.present {
  min-height: 770px !important;
  position: relative !important;
}

rofrol on 21 Jan 2016

👍7

CSS is enough:

.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;
}

http://stackoverflow.com/questions/23241903/positionfixed-in-reveal-js/34922750#34922750

rofrol on 5 May 2016

❤2

On firefox (v47) it doesnt work properly (Chrome and Edge do). It creates slides super wide that span over two displays. This is also the case with the demo mentioned in the stackoverflow post.

blubbsy on 29 May 2016

How do you get this to work for just one element like a <header>?

Notoncebut2x on 12 Jul 2016

I dont know men

2016-07-12 23:32 GMT+03:00 Rory N. [email protected]:

How do you get this to work for just one element like a
?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/hakimel/reveal.js/issues/180#issuecomment-232171054,
or mute the thread
https://github.com/notifications/unsubscribe/APROIJJ7WkTFYNfa8CHgazw4hrTQHPmjks5qU_nogaJpZM4AM1i1
.

skilllet on 13 Jul 2016

@rofrol : many thanks for your solution. it works fine with the default revealjs configuration.

However it fails when you change the transition mode:

With transition= "concave" : https://rawgit.com/rofrol/reveal.js/fixed_header/?transition=concave
With transition= "fade" : https://rawgit.com/rofrol/reveal.js/fixed_header/?transition=fade
etc...

Any idea why ?

daamien on 14 Jan 2017

👍1

@daamien did you find a solution ?

vjeantet on 19 Apr 2017

Still no solution at the moment.

The workaround I found is to force the transition to slide

daamien on 19 Apr 2017

It really moves when you change the transition. However, there is still a wide gap at the top. Any idea?

JJ on 31 May 2017

possibly related, I found this;
https://github.com/chrismetcalf/reveal.js-fullscreen-img

morandd on 15 Jun 2017

Having an issue setting Div element height to 100%, but was able to set the width of Div 100% tried all the solutions on the page, not sure if the post by morandd will be of help, any suggestions, I need the Div tag to take up the entire slide

Fptr on 6 Dec 2017

Or is there a way to know the height/width of the slide

Fptr on 6 Dec 2017

@rofrol solution works, but it may have an unwanted effect: when you have, say, a big image below the header
that goes below the bottom of the screen, then the image is "pulled up" and the top of the image appears behind the header. While you most likely would prefer to see a clean header and hide the bottom of the image.