Reputation: 15239
I have to scroll page by page, having a top menu banner always in the top of the screen.
Here is my fiddle
$("section").onepage_scroll({
sectionContainer: "article",
loop: false
});
html, body {
height: 100%;
padding: 0; margin: 0; }
header {
height: 50px;
position: absolute;
top: 0; left: 0; z-index: 100;
background: yellow; opacity: .5;
width: 100%; }
section {
background: beige;
box-sizing: border-box;
height: 100%; width: 100%; }
article {
position: absolute;
display: table-row;
background: brown;
height: 100%; width: 100%; }
article > div {
float: left;
width: 50%;
height: 100%;
border: 1px solid blue;
box-sizing: border-box;
display: table;
text-align: center; }
article > div div {
display: table-cell;
vertical-align: middle; }
article > div:first-of-type { background: red; }
article > div:last-of-type { background: lightgreen; }
<link href="http://www.thepetedesign.com/demos/onepage-scroll.css" rel="stylesheet"/>
<script src="http://www.thepetedesign.com/demos/jquery.onepage-scroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>this is the top banner</header>
<section>
<article>
<div>
<div>1 this is the first cell</div>
</div>
<div>
<div>this is the second</div>
</div>
</article>
<article>
<div>
<div>2 this is the first cell</div>
</div>
<div>
<div>this is the second</div>
</div>
</article>
<article>
<div>
<div>3 this is the first cell</div>
</div>
<div>
<div>this is the second</div>
</div>
</article>
</section>
I need to display the FULL cell in the remaining space out of the banner. The cell should not overflow to the bottom (I should see the blue border at the bottom)
PS.
Setting the margin-top to the section gives this result when scrolling:
that is not good, as I need to see the full "cell" till the bottom on the page...
I need the result like this:
BUT will cell fully in the page (in the picture the bottom part of cell overflows the bottom of the page - e don't see the bottom blue border)!
Upvotes: 2
Views: 417
Reputation: 5890
Add the following two CSS rules to the section
which might serve your purpose:
<section style=" height: calc(100% - 50px); top:50px;" > <!-- ... -->
Note: Adding the rules to the CSS stylesheet is somehow being overridden by the plugin your making use of.
Upvotes: 1
Reputation: 1969
Add this to your CSS:
section.onepage-wrapper {
margin-top: 50px;
}
Remember to adjust the value when changing the height of the header. You can do that with jQuery, too:
$( document ).ready( function() {
$( "section.onepager-wrapper" ).css({ "margin-top": $( "header" ).height() + "px" });
});
Upvotes: 0