Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vertically fill screen 100%? #180

Closed
kapelskic opened this issue Oct 15, 2012 · 32 comments
Closed

Vertically fill screen 100%? #180

kapelskic opened this issue Oct 15, 2012 · 32 comments
Labels

Comments

@kapelskic
Copy link

@kapelskic kapelskic commented Oct 15, 2012

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
Copy link
Contributor

@dandv dandv commented Oct 15, 2012

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
Copy link
Author

@kapelskic kapelskic commented Oct 15, 2012

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
Copy link
Contributor

@dandv dandv commented Oct 15, 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).

@kapelskic
Copy link
Author

@kapelskic kapelskic commented Oct 17, 2012

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

@hakimel
Copy link
Owner

@hakimel hakimel commented Oct 24, 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 hakimel closed this as completed Oct 24, 2012
@kapelskic
Copy link
Author

@kapelskic kapelskic commented Nov 1, 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?

@ntc2
Copy link

@ntc2 ntc2 commented Feb 13, 2014

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
Copy link

@edoson edoson commented Feb 14, 2014

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

@edoson
Copy link

@edoson edoson commented Feb 14, 2014

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

@hanleybrand
Copy link

@hanleybrand hanleybrand commented May 2, 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%;
}

@ntc2
Copy link

@ntc2 ntc2 commented May 20, 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;
}

@larsplaul
Copy link

@larsplaul larsplaul commented Jun 7, 2014

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
Copy link

@zachary-foster zachary-foster commented Aug 22, 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;
}

@fommil
Copy link

@fommil fommil commented Nov 16, 2014

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

@lla4um
Copy link

@lla4um lla4um commented Mar 25, 2015

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
Copy link

@vsivsi vsivsi commented Nov 16, 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.

@rofrol
Copy link

@rofrol rofrol commented Jan 21, 2016

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
Copy link

@rofrol rofrol commented May 5, 2016

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
Copy link

@blubbsy blubbsy commented May 29, 2016

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
Copy link

@Notoncebut2x Notoncebut2x commented Jul 12, 2016

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

@skilllet
Copy link

@skilllet skilllet commented Jul 13, 2016

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
Copy link

@daamien daamien commented Jan 14, 2017

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

However it fails when you change the transition mode:

Any idea why ?

@vjeantet
Copy link

@vjeantet vjeantet commented Apr 19, 2017

@daamien did you find a solution ?

@daamien
Copy link

@daamien daamien commented Apr 19, 2017

Still no solution at the moment.

The workaround I found is to force the transition to slide

@JJ
Copy link

@JJ JJ commented May 31, 2017

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

@morandd
Copy link

@morandd morandd commented Jun 15, 2017

@Fptr
Copy link

@Fptr Fptr commented Dec 6, 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
Copy link

@Fptr Fptr commented Dec 6, 2017

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

@cerisara
Copy link

@cerisara cerisara commented Jan 14, 2018

@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
Copy link

@G1305 G1305 commented Feb 20, 2018

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

@JJ
Copy link

@JJ JJ commented Feb 20, 2018

@G1305
Copy link

@G1305 G1305 commented Feb 20, 2018

THANK YOU very much @JJ

redbug312 added a commit to redbug312/reveal.js that referenced this issue Nov 18, 2020
Code modified from upstream issue[1]
[1]: hakimel/issues/180#issuecomment-217159099
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests