Разделитель секция с fullPage
Использую fullPage плагин:
var counterScreen = 0,
counterScreenList = [];
$("#fullpage").fullpage({
licenseKey: 'xxxxxxxx-xxxxxxxx-xxxxxxxx-xxxxxxxx',
anchors: counterScreenList,
lazyLoading: !0,
navigation: !0,
navigationPosition: "right",
navigationTooltips: counterScreenList,
showActiveTooltip: true,
});
$('#fp-nav li a[href="#undefined"]').last().hide();
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
h2 {
min-height: 5rem;
line-height: 5rem;
text-align: center;
}
p {
font-size: 1rem;
line-height: 2rem;
}
#s-1 {
background: #ccc;
}
#s-2 {
background: #eee;
}
#s-3 {
background: #888;
}
nav {
height: 50px;
background: #fff;
position: fixed;
left: 0;
right: 0;
top: 0;
}
.fp-tableCell {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
align-content: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.container {
width: 100%;
padding: 0 15px;
}
.s {
padding: 100px 0;
background: blue;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.min.css" integrity="sha256-MEURuTYmXMgJUKFGPHlPu7NKXWTA2PMhMIaM+OZhE84=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js" integrity="sha256-hpQQQJNPOw2uF6eylQqhnNkjQWl8F7FVGx3WyYkdqKI=" crossorigin="anonymous"></script>
<nav>
Menu
</nav>
<div id="fullpage">
<div class="section fp-auto-height-responsive" data-anchor="S-1" id="s-1">
<div class="container">
<h2>1</h2>
</div>
</div>
<div class="s"></div>
<div class="section fp-auto-height-responsive" data-anchor="S-2" id="s-2">
<div class="container">
<h2>2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quia sed expedita qui laudantium a quibusdam iusto aspernatur, aliquam enim!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eos, dolor nobis dolorem, eaque quaerat molestiae facere aut ratione, voluptates itaque reiciendis cumque porro mollitia praesentium in ipsa animi sint placeat nihil vel. Inventore saepe
ratione consequatur minima debitis voluptatem consequuntur iusto maiores reiciendis in ea officiis vel nostrum aliquid impedit, aliquam, placeat dolorum assumenda id quibusdam obcaecati corrupti. Voluptate velit illo voluptatibus quae accusamus
perferendis eum esse, rem aspernatur adipisci reiciendis porro unde, vitae ut deserunt officia minus nam dolores eligendi culpa voluptates. Laboriosam ex saepe explicabo, sed modi necessitatibus. Corporis porro fugit voluptates, voluptatem non
praesentium inventore quidem!
</p>
</div>
</div>
<div class="section fp-auto-height-responsive" data-anchor="S-3" id="s-3">
<div class="container">
<h2>3</h2>
</div>
</div>
<div class="section fp-auto-height-responsive">
footer
</div>
</div>
Вопрос: как лучше добавить разделитель между секциями (с синим фоном который) определенной высоты и как сделать секцию чтобы обычно скролилась если много внутреннего контента (не вмещается)?