I recently decided to experiment with creating a one-page template from scratch just for fun and to learn something new. As I was exploring examples on Bootstrap's website, I encountered an issue where my divs were not filling the width/height as intended. In an attempt to resolve this, I experimented with some basic CSS modifications but unfortunately failed. Eventually, I found some code in FullPage.js that seemed promising.
The Bootstrap example I came across really caught my eye, and my main goal now is to ensure that every div fills the screen while keeping the navigation at the top.
To showcase what I've been working on, I have created two different examples on jsfiddle.
1: fullpage.js: The navbar behaves oddly in this example when in fullscreen mode. It doesn't show which div you are currently viewing, which is a bit frustrating. However, it seems to work fine when not in fullscreen. (You may need to save the code in an HTML file and view it outside jsfiddle to witness this)
$(document).ready(function() {
$('#fullpage').fullpage({
/* no options */
});
});
2: using only CSS: In this example, the navbar disappears when scrolling down to the second div. I'm uncertain if it's functioning correctly as intended.
html, body {height: 100%;}
#section1 { width: 100%; height: 100%;}
#section2 { width: 100%; height: 100%;}
#section3 { width: 100%; height: 100%;}
#section4 { width: 100%; height: 100%;}
If anyone has any suggestions or advice regarding this issue, I would greatly appreciate your input. Thank you!