Set height of section in fullpage.js - html

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.

Answer 2

This is what I came up with I changed
$(window).height();
to
var windowsHeight = $('.universal-container').height();
so lets say we have 4 divs
<div class="main-container">
<div class= "1st-div-holder">
</div>
<div class= "2nd-div-holder">
<div class= "section">
<div class= "universal-container">
</div>
</div>
</div>
</div>
now on our css we can do something like this
.main-comtainer{
width:100%;
height:100%;
}
.1st-div-holder{
height:10%;
width:100%;
position:fixed;
}
.2nd-div-holder{
height: 90%;
position: absolute;
bottom: 0;
}
this way the height is automatically picked up without taking up the whole window.