Set height of section in fullpage.js

Question

I am using fullPage.js This may sound very noobish, but can't figure how to set a section to have a height of less than 100%, I have tried setting it in the css using .section and #section1 (eg. height: 80%;), but this has no effect...

Many thanks.

Max

Answer 1

The same question was answered in the plugin's github issues forum.

This is a FULL PAGE plugin. There's no such option

It is not an option the plugin offers. If you want to do it, you would need to do it by yourself. Probably by overwriting the height property of the sections and slides after the plugin is rendered (on the afterRender callback) and after it gets resized (afterResize).

You can try it with by adding CSS styles as well, by adding things like:

#section1,
#section1 .fp-slide,
#section1 .fp-tableCell{
    height: auto !important;
}

UPDATE

Now fullpage.js provides a way to create smaller sections than the viewport (or even bigger ones when using autoScrolling:false or scrollBar:true.

Adding the class fp-auto-height on each section will do it as stated in the documentation.

UPDATE 2

fp-auto-height won't allow you to use percentages, but there's an extension that gives you that possibility. Offset Sections. It also allows you to show the section in the middle of the view-port showing parts of both the previous and the next one.