Vertically fill screen 100%?

[kapelskic]

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%?

[dandv]

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

[kapelskic]

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

[dandv]

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).

[kapelskic]

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

[hakimel]

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.

[kapelskic]

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?

[ntc2]

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.

[edoson]

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

[edoson]

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

[hanleybrand]

@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%;
}

[ntc2]

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

[larsplaul]

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 ?

[zachary-foster]

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

[fommil]

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

[lla4um]

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.

[vsivsi]

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.

[rofrol]

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]

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

[blubbsy]

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.

[Notoncebut2x]

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

[skilllet]

I dont know men

2016-07-12 23:32 GMT+03:00 Rory N. notifications@github.com:

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
#180 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/APROIJJ7WkTFYNfa8CHgazw4hrTQHPmjks5qU_nogaJpZM4AM1i1
.

[daamien]

@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 ?

[vjeantet]

@daamien did you find a solution ?

[daamien]

Still no solution at the moment.

The workaround I found is to force the transition to slide

[JJ]

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

[morandd]

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

[Fptr]

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]

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

[cerisara]

@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.

[G1305]

HELLO EVERYONE
someone knows how to make dynamic contents inside slides?

[JJ]

It's HTML. Just insert a JS script and use an event to make it go.

[G1305]

THANK YOU very much @JJ

[axiomtutor]

I know this is old but the fix that worked for me was, in the index.html file, go to the bottom of the doc, and change it to

Reveal.initialize({
	hash: true,
	width: '100%',
	height: '100%',

	plugins: [ RevealMath.KaTeX, RevealMarkdown, RevealHighlight, RevealNotes ]
});

[Sieboldianus]

I wanted the auto-layout for the majority of slides, but needed to disable it for just a few. Just add a div with 100% viewport height:

<div style="height:100vh">

<!-- slide content here -->

</div>

Note:

• Sometimes, 100vh stretches below your display height (for some reason I haven't found out). To prevent layout elements to fall off below your screen, align elements based on top, not bottom (see example below)
• also, I found using 99vh prevents ?pdf-export to add empty white slides

<div style="height:99vh"><br>
<span>Task 2: Counting users</span>
<br>
<div style="position:absolute;top:0;left:0;height:600px;width:100%;z-index:0">
    <img 
        class="plain" style="width:100%;margin-top:0px;position:absolute;left:50%;transform:translateX(-50%)" 
        src="images/grid_shapes.png"/>
</div>

<div style="width:100%;height:100px;position:absolute;top:550px;left:50px;text-align:left;z-index:1000;background-color: rgba(255,255,255, 0.8);">
<ul">
<li>Background: Pre-aggregated grid with a set of user for each cell</li>
<li>Foreground: Country shapes</li>
</ul>
</div>
</div>