Related
This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 5 months ago.
Other positions are working good, but when I try sticky its not working. I want the parent container to stick at my bottom of page.
.control-con {
position: sticky;
bottom: 0px;
width: 100%;
}
<section class="control-con">
<article class="controls">
<input type="range" name="playbar" class="playbar">
</article>
</section>
Sticky depends on the placement and the content added in the HTML.
If the positioned element is set to bottom, content has to precede it, like so:
.control-con {
position: sticky;
bottom: 0px;
width: 100%;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum sem dui, nec mattis nunc convallis ut. Proin posuere placerat risus, ut semper lorem varius ac. Curabitur consequat ex sed sem ultrices, quis ornare elit mollis. Fusce eu tristique enim, quis bibendum lectus. Nulla magna magna, maximus in urna et, mollis luctus lectus. Praesent augue mi, rhoncus eu ligula in, aliquet imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut efficitur gravida velit. Aliquam et libero lacinia, mollis metus vel, finibus risus. Pellentesque mollis augue ac condimentum mollis.
In lacinia congue porta. Curabitur augue felis, ultricies in velit et, egestas sagittis neque. Donec nec tristique tortor. Mauris tempor erat risus. Nullam vel congue ligula. Sed nulla sem, venenatis nec iaculis sed, ornare eget ante. Etiam efficitur magna vel ligula porta, nec porttitor turpis tempor. Curabitur at tempor erat. Aliquam venenatis consectetur dui. Integer id ipsum eleifend, dictum justo at, finibus nibh.
Fusce dignissim vulputate elit, a pulvinar ipsum fringilla at. In lacinia felis libero, sit amet placerat erat molestie at. Duis laoreet metus nec nunc semper convallis. Nulla lacus est, suscipit at aliquam et, mattis dignissim nibh. Donec id quam massa. Praesent posuere sagittis erat, non aliquet tellus dictum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus justo dolor, cursus tempor orci sed, cursus cursus lacus.
Phasellus ullamcorper justo a turpis commodo, et semper neque vehicula. Ut facilisis nisl eleifend ex feugiat blandit. Aenean mollis euismod orci sit amet condimentum. Nulla varius lorem eu ex rutrum, et imperdiet est placerat. Nunc eu sem molestie, laoreet ipsum eu, condimentum lacus. Maecenas ut ipsum mi. Morbi in suscipit orci.
Donec vel diam et tortor ultricies commodo. Donec in enim quis urna pharetra congue. Nunc dignissim volutpat elit eu suscipit. Aenean et porta orci. Etiam lobortis malesuada nisi vitae feugiat. Quisque purus lectus, aliquam quis suscipit vitae, porta vitae arcu. Integer maximus turpis quis volutpat blandit. Sed et commodo nisi. In risus tellus, eleifend ac finibus nec, viverra id arcu. Aenean elit diam, mattis porta aliquam eget, sagittis a dolor. In feugiat sapien fringilla dignissim viverra. Aliquam non dolor fermentum, congue tellus sed, tincidunt est. Ut finibus iaculis purus vitae rhoncus. Morbi dignissim leo tincidunt mattis lacinia.</div>
<section class="control-con">
<article class="controls">
<input type="range" name="playbar" class="playbar">
</article>
</section>
Else if we set the element we want to stick to top, the content has to come after it in order for it to work:
.control-con {
position: sticky;
top: 0px;
width: 100%;
}
<section class="control-con">
<article class="controls">
<input type="range" name="playbar" class="playbar">
</article>
</section>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum sem dui, nec mattis nunc convallis ut. Proin posuere placerat risus, ut semper lorem varius ac. Curabitur consequat ex sed sem ultrices, quis ornare elit mollis. Fusce eu tristique
enim, quis bibendum lectus. Nulla magna magna, maximus in urna et, mollis luctus lectus. Praesent augue mi, rhoncus eu ligula in, aliquet imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut efficitur gravida velit. Aliquam
et libero lacinia, mollis metus vel, finibus risus. Pellentesque mollis augue ac condimentum mollis. In lacinia congue porta. Curabitur augue felis, ultricies in velit et, egestas sagittis neque. Donec nec tristique tortor. Mauris tempor erat risus.
Nullam vel congue ligula. Sed nulla sem, venenatis nec iaculis sed, ornare eget ante. Etiam efficitur magna vel ligula porta, nec porttitor turpis tempor. Curabitur at tempor erat. Aliquam venenatis consectetur dui. Integer id ipsum eleifend, dictum
justo at, finibus nibh. Fusce dignissim vulputate elit, a pulvinar ipsum fringilla at. In lacinia felis libero, sit amet placerat erat molestie at. Duis laoreet metus nec nunc semper convallis. Nulla lacus est, suscipit at aliquam et, mattis dignissim
nibh. Donec id quam massa. Praesent posuere sagittis erat, non aliquet tellus dictum sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus justo dolor, cursus tempor orci sed, cursus cursus
lacus. Phasellus ullamcorper justo a turpis commodo, et semper neque vehicula. Ut facilisis nisl eleifend ex feugiat blandit. Aenean mollis euismod orci sit amet condimentum. Nulla varius lorem eu ex rutrum, et imperdiet est placerat. Nunc eu sem molestie,
laoreet ipsum eu, condimentum lacus. Maecenas ut ipsum mi. Morbi in suscipit orci. Donec vel diam et tortor ultricies commodo. Donec in enim quis urna pharetra congue. Nunc dignissim volutpat elit eu suscipit. Aenean et porta orci. Etiam lobortis malesuada
nisi vitae feugiat. Quisque purus lectus, aliquam quis suscipit vitae, porta vitae arcu. Integer maximus turpis quis volutpat blandit. Sed et commodo nisi. In risus tellus, eleifend ac finibus nec, viverra id arcu. Aenean elit diam, mattis porta aliquam
eget, sagittis a dolor. In feugiat sapien fringilla dignissim viverra. Aliquam non dolor fermentum, congue tellus sed, tincidunt est. Ut finibus iaculis purus vitae rhoncus. Morbi dignissim leo tincidunt mattis lacinia.</div>
You just have to place content before the sticky element inside the HTML, and it will work.
I created a header with the position set to sticky and top to 0.
But if I scroll down the page, at some point the header stop scrolling with the page.
I think it's an easy fix, but I'm just too dumb for it...
I tried to remove other elements because I thought they were intersecting with the header, but that didn't really work.
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
<header id="navbar">
<div class="navbar"></div>
</header>
I expected the header to be at the top of the viewport the entire time, and not disappearing at some point of scrolling.
Hello Squeez Music and welcome to stackoverflow!
Unfortunately we can't really help you with the problem because you haven't shared enough code. What you have shared should work perfectly fine. To demonstrate I've made a snippet, and you'll see the navbar never disappears.
To get to the bottom of this, it would be a good idea to make a snippet of your own which reproduces the problem you're having. In fact, in the process of doing so you may well figure it out for yourself.
Here's what I'm talking about:
https://stackoverflow.com/help/minimal-reproducible-example
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
<header id="navbar" style="padding: 5px">
<div class="navbar">Check out my nav bar</div>
</header>
<div style="padding: 5px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius, nunc id pulvinar sagittis, enim sapien convallis ex, a egestas dui augue id ipsum. Nunc lorem neque, posuere ut neque eu, sagittis tristique massa. Suspendisse hendrerit velit augue, nec facilisis lorem finibus at. In lobortis finibus diam eget consectetur. Cras vitae dignissim est, id ornare quam. Integer convallis laoreet enim, sed consectetur tellus cursus in. Cras fermentum neque quis eleifend pretium. Vivamus maximus dui eu cursus rhoncus. Mauris bibendum venenatis quam non semper. Nam ut egestas libero. Aliquam rutrum risus at diam consequat, in viverra enim ultricies. Praesent vitae ullamcorper sapien. Quisque suscipit bibendum ex, id scelerisque metus. Sed id est sed sapien cursus sodales vitae non dui. Phasellus sit amet mauris a metus feugiat scelerisque nec non urna. Pellentesque lacinia ultricies ante, vel maximus nisl sagittis vitae.<br><br>
Aliquam aliquet sit amet erat sit amet tincidunt. Nullam et pulvinar mauris. Aenean rhoncus ut tellus in bibendum. Praesent sed consequat libero, interdum interdum lacus. Ut facilisis luctus neque ac maximus. Aenean ac maximus risus, eget vulputate tortor. Integer sed maximus odio. Fusce consectetur enim eu urna dignissim semper sit amet sed ipsum. Morbi consectetur diam sollicitudin orci ornare pellentesque. Donec nec justo ornare, tincidunt nulla ut, varius arcu. Quisque ac ipsum at nunc aliquam efficitur.<br><br>
Phasellus aliquam ornare augue nec faucibus. Etiam iaculis tincidunt feugiat. Nam auctor fringilla nunc, eu dictum odio gravida id. Donec vitae turpis ut nisl condimentum gravida. Aenean eleifend tellus arcu, non vestibulum eros cursus vel. Sed id lacinia magna. Curabitur mattis eleifend pharetra. Proin ut arcu ultricies, gravida turpis sit amet, auctor augue. Sed dictum gravida dictum.<br><br>
Suspendisse in felis mollis, condimentum nulla vel, mollis neque. Integer sagittis, sem eu lobortis ultricies, dolor tellus vestibulum lorem, sed elementum dui tortor vitae neque. Donec id massa eget enim laoreet lacinia in id arcu. Praesent consectetur dolor a nibh aliquam ullamcorper. In vehicula mollis tellus ut ornare. Quisque fringilla dignissim nisi quis tempus. Integer aliquet orci quam, vitae rutrum turpis sollicitudin ullamcorper. Pellentesque imperdiet ac orci quis tempor. Sed a lobortis odio.<br><br>
Nullam in massa id ligula pellentesque convallis. Morbi sagittis consectetur dui in mollis. Mauris a ultrices mi. Suspendisse vulputate vulputate vehicula. Curabitur sit amet sem nunc. Vestibulum vitae convallis libero. Vivamus imperdiet in tortor id suscipit.
Donec venenatis quam sagittis risus iaculis accumsan. Praesent egestas tincidunt placerat. Nulla fringilla sodales velit, vitae interdum mauris iaculis et. Donec tempor dignissim magna non ultrices. Etiam arcu ipsum, interdum in mi mattis, laoreet tincidunt magna. In eu est leo. Cras dapibus, ante sit amet viverra accumsan, dolor ipsum eleifend nibh, sit amet rhoncus enim felis a felis. Fusce quis odio lobortis, eleifend urna nec, aliquet orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie a tellus quis fringilla. Aenean condimentum, ligula vel vulputate euismod, ipsum urna malesuada lorem, laoreet eleifend turpis felis vel mi.<br><br>
Morbi interdum, ligula ornare cursus auctor, felis sapien faucibus tellus, nec pretium eros nisi at arcu. Aliquam a neque risus. Fusce ultricies metus turpis, sed semper enim maximus tincidunt. Integer sed tortor ut orci fermentum commodo ac id lacus. Maecenas viverra neque eget ipsum semper, in finibus sapien pretium. Phasellus pretium gravida magna ut commodo. Ut vel ultrices lorem, commodo euismod dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum malesuada metus nec pretium.<br><br>
Curabitur mattis scelerisque porta. Morbi quis viverra lacus, id imperdiet nunc. Sed facilisis, arcu quis varius vulputate, sem diam luctus nunc, non rutrum felis purus eget ex. Nam condimentum fringilla maximus. Vivamus interdum rutrum sodales. Proin fermentum lacus hendrerit pretium tempor. Mauris eleifend molestie massa a placerat. Sed in lobortis massa. Ut in tincidunt dui. Pellentesque ultrices finibus magna ac faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris odio ligula, luctus eget ultrices ac, pellentesque sit amet arcu. Morbi eu metus augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius, nunc id pulvinar sagittis, enim sapien convallis ex, a egestas dui augue id ipsum. Nunc lorem neque, posuere ut neque eu, sagittis tristique massa. Suspendisse hendrerit velit augue, nec facilisis lorem finibus at. In lobortis finibus diam eget consectetur. Cras vitae dignissim est, id ornare quam. Integer convallis laoreet enim, sed consectetur tellus cursus in. Cras fermentum neque quis eleifend pretium. Vivamus maximus dui eu cursus rhoncus. Mauris bibendum venenatis quam non semper. Nam ut egestas libero. Aliquam rutrum risus at diam consequat, in viverra enim ultricies. Praesent vitae ullamcorper sapien. Quisque suscipit bibendum ex, id scelerisque metus. Sed id est sed sapien cursus sodales vitae non dui. Phasellus sit amet mauris a metus feugiat scelerisque nec non urna. Pellentesque lacinia ultricies ante, vel maximus nisl sagittis vitae.<br><br>
Aliquam aliquet sit amet erat sit amet tincidunt. Nullam et pulvinar mauris. Aenean rhoncus ut tellus in bibendum. Praesent sed consequat libero, interdum interdum lacus. Ut facilisis luctus neque ac maximus. Aenean ac maximus risus, eget vulputate tortor. Integer sed maximus odio. Fusce consectetur enim eu urna dignissim semper sit amet sed ipsum. Morbi consectetur diam sollicitudin orci ornare pellentesque. Donec nec justo ornare, tincidunt nulla ut, varius arcu. Quisque ac ipsum at nunc aliquam efficitur.<br><br>
Phasellus aliquam ornare augue nec faucibus. Etiam iaculis tincidunt feugiat. Nam auctor fringilla nunc, eu dictum odio gravida id. Donec vitae turpis ut nisl condimentum gravida. Aenean eleifend tellus arcu, non vestibulum eros cursus vel. Sed id lacinia magna. Curabitur mattis eleifend pharetra. Proin ut arcu ultricies, gravida turpis sit amet, auctor augue. Sed dictum gravida dictum.<br><br>
Suspendisse in felis mollis, condimentum nulla vel, mollis neque. Integer sagittis, sem eu lobortis ultricies, dolor tellus vestibulum lorem, sed elementum dui tortor vitae neque. Donec id massa eget enim laoreet lacinia in id arcu. Praesent consectetur dolor a nibh aliquam ullamcorper. In vehicula mollis tellus ut ornare. Quisque fringilla dignissim nisi quis tempus. Integer aliquet orci quam, vitae rutrum turpis sollicitudin ullamcorper. Pellentesque imperdiet ac orci quis tempor. Sed a lobortis odio.<br><br>
Nullam in massa id ligula pellentesque convallis. Morbi sagittis consectetur dui in mollis. Mauris a ultrices mi. Suspendisse vulputate vulputate vehicula. Curabitur sit amet sem nunc. Vestibulum vitae convallis libero. Vivamus imperdiet in tortor id suscipit.<br><br>
Donec venenatis quam sagittis risus iaculis accumsan. Praesent egestas tincidunt placerat. Nulla fringilla sodales velit, vitae interdum mauris iaculis et. Donec tempor dignissim magna non ultrices. Etiam arcu ipsum, interdum in mi mattis, laoreet tincidunt magna. In eu est leo. Cras dapibus, ante sit amet viverra accumsan, dolor ipsum eleifend nibh, sit amet rhoncus enim felis a felis. Fusce quis odio lobortis, eleifend urna nec, aliquet orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie a tellus quis fringilla. Aenean condimentum, ligula vel vulputate euismod, ipsum urna malesuada lorem, laoreet eleifend turpis felis vel mi.<br><br>
Morbi interdum, ligula ornare cursus auctor, felis sapien faucibus tellus, nec pretium eros nisi at arcu. Aliquam a neque risus. Fusce ultricies metus turpis, sed semper enim maximus tincidunt. Integer sed tortor ut orci fermentum commodo ac id lacus. Maecenas viverra neque eget ipsum semper, in finibus sapien pretium. Phasellus pretium gravida magna ut commodo. Ut vel ultrices lorem, commodo euismod dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vestibulum malesuada metus nec pretium.<br><br>
Curabitur mattis scelerisque porta. Morbi quis viverra lacus, id imperdiet nunc. Sed facilisis, arcu quis varius vulputate, sem diam luctus nunc, non rutrum felis purus eget ex. Nam condimentum fringilla maximus. Vivamus interdum rutrum sodales. Proin fermentum lacus hendrerit pretium tempor. Mauris eleifend molestie massa a placerat. Sed in lobortis massa. Ut in tincidunt dui. Pellentesque ultrices finibus magna ac faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris odio ligula, luctus eget ultrices ac, pellentesque sit amet arcu. Morbi eu metus augue.</div>
The header is inside the __body, which is the sticky container. The height of __body is 100% of the body, which is capped at 100vh. Since the content is longer than 100%, the content overflows, and the actual height of the body is larger than 100vh, hence the scroll. Since a sticky item is limited by it's container, the item is scrolled out when it reaches the center (the end of the sticky container).
Example:
body {
height: 100vh;
margin: 0;
}
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
.__body {
height: 100%;
background: red;
}
<div class="__body">
<header id="navbar">
<div class="navbar">Navbar</div>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis quis justo ut bibendum. Praesent sapien elit, pellentesque quis egestas nec, hendrerit a velit. Sed eleifend euismod nibh sit amet dignissim. Vivamus tempus neque enim, eu facilisis ligula eleifend vitae. Pellentesque accumsan vestibulum erat. Sed ut interdum nunc, vitae volutpat tellus. Vestibulum accumsan egestas finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id nisl nulla.
Suspendisse ligula ligula, bibendum sit amet aliquam non, mollis in urna. Suspendisse quis dictum augue. Mauris magna est, luctus id eros vel, interdum lacinia eros. Ut eget nisl at lectus scelerisque vulputate. Etiam viverra maximus orci ut tempus. Pellentesque aliquam lectus ac nisi efficitur fringilla. Sed ut leo eget est interdum pharetra. Sed turpis ex, egestas nec vehicula sit amet, sagittis nec est. Nulla sapien mauris, mattis sit amet dui id, cursus aliquet ligula. Etiam eu orci eget ante faucibus dapibus ac sit amet ligula. Quisque eget porttitor sapien.
Donec elementum urna quam. Morbi vehicula augue et metus eleifend, at aliquet erat sodales. Mauris et tempus orci. Morbi sagittis arcu nisl, eget molestie tortor consequat et. Integer vehicula consequat risus. Vivamus eros ipsum, maximus nec orci blandit, semper commodo dui. Praesent ut dapibus justo, non elementum ligula. Aenean sagittis odio quis malesuada fermentum. Pellentesque vestibulum sem a urna cursus dapibus. Praesent ultricies sapien sed turpis dictum faucibus. Maecenas sollicitudin at justo quis accumsan. Vivamus facilisis purus felis, eu bibendum nunc tincidunt et.
Aliquam purus ex, suscipit ut nibh at, vulputate consectetur est. Sed venenatis, elit vitae consectetur iaculis, sem nunc consequat mauris, nec gravida enim orci et dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis interdum aliquam. Duis vehicula orci a pretium semper. Aliquam egestas consequat libero in interdum. Aliquam mi leo, sodales nec turpis bibendum, cursus posuere turpis. Proin vehicula magna eu libero aliquet, interdum mollis orci tincidunt. Etiam feugiat euismod magna, vel lacinia velit condimentum ac. Maecenas diam dui, aliquet non euismod at, suscipit a nulla. Aliquam elit enim, efficitur sit amet neque non, feugiat tristique enim. Ut aliquet maximus lacus, eget euismod quam. Donec vehicula ex at libero sodales, sit amet faucibus velit facilisis.
Morbi risus tortor, sollicitudin at lorem quis, convallis molestie enim. Proin efficitur libero leo, et fermentum velit eleifend in. Etiam vitae suscipit arcu. Nunc eu aliquam quam, a sollicitudin enim. Vivamus porttitor id nisl id pharetra. Sed consequat semper orci, sed iaculis arcu convallis sit amet. Donec vitae elementum nunc, ullamcorper accumsan tellus. Cras eu cursus ante.
Sed efficitur, massa a viverra scelerisque, mi magna tincidunt ipsum, ac laoreet lacus nunc quis mi. Pellentesque ut rutrum felis. Morbi euismod nisi elit, ac tristique arcu semper eget. Suspendisse orci augue, auctor quis dapibus vitae, laoreet in quam. In sagittis, odio sed suscipit mattis, risus sapien faucibus nisl, nec commodo nunc urna sit amet urna. Nulla lobortis, tellus nec auctor fermentum, lacus sapien rhoncus quam, at finibus lacus leo vel nisl. Integer eu aliquet erat. Suspendisse maximus blandit ultrices. Nunc sodales eu erat sit amet tincidunt. Nulla molestie nulla ut lectus luctus, vitae sollicitudin mi feugiat. Proin interdum elit quis lorem rhoncus ultricies. Mauris ac dui sit amet nulla lacinia venenatis in sit amet odio.
</div>
The solution is simple to make __body grow with the content.
body {
margin: 0;
}
header#navbar {
grid-area: navbar;
background-image: linear-gradient(to bottom, white, rgb(230, 230, 230));
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}
.__body {
min-height: 100vh;
background: red;
}
<div class="__body">
<header id="navbar">
<div class="navbar">Navbar</div>
</header>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis quis justo ut bibendum. Praesent sapien elit, pellentesque quis egestas nec, hendrerit a velit. Sed eleifend euismod nibh sit amet dignissim. Vivamus tempus neque enim, eu facilisis ligula eleifend vitae. Pellentesque accumsan vestibulum erat. Sed ut interdum nunc, vitae volutpat tellus. Vestibulum accumsan egestas finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id nisl nulla.
Suspendisse ligula ligula, bibendum sit amet aliquam non, mollis in urna. Suspendisse quis dictum augue. Mauris magna est, luctus id eros vel, interdum lacinia eros. Ut eget nisl at lectus scelerisque vulputate. Etiam viverra maximus orci ut tempus. Pellentesque aliquam lectus ac nisi efficitur fringilla. Sed ut leo eget est interdum pharetra. Sed turpis ex, egestas nec vehicula sit amet, sagittis nec est. Nulla sapien mauris, mattis sit amet dui id, cursus aliquet ligula. Etiam eu orci eget ante faucibus dapibus ac sit amet ligula. Quisque eget porttitor sapien.
Donec elementum urna quam. Morbi vehicula augue et metus eleifend, at aliquet erat sodales. Mauris et tempus orci. Morbi sagittis arcu nisl, eget molestie tortor consequat et. Integer vehicula consequat risus. Vivamus eros ipsum, maximus nec orci blandit, semper commodo dui. Praesent ut dapibus justo, non elementum ligula. Aenean sagittis odio quis malesuada fermentum. Pellentesque vestibulum sem a urna cursus dapibus. Praesent ultricies sapien sed turpis dictum faucibus. Maecenas sollicitudin at justo quis accumsan. Vivamus facilisis purus felis, eu bibendum nunc tincidunt et.
Aliquam purus ex, suscipit ut nibh at, vulputate consectetur est. Sed venenatis, elit vitae consectetur iaculis, sem nunc consequat mauris, nec gravida enim orci et dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis interdum aliquam. Duis vehicula orci a pretium semper. Aliquam egestas consequat libero in interdum. Aliquam mi leo, sodales nec turpis bibendum, cursus posuere turpis. Proin vehicula magna eu libero aliquet, interdum mollis orci tincidunt. Etiam feugiat euismod magna, vel lacinia velit condimentum ac. Maecenas diam dui, aliquet non euismod at, suscipit a nulla. Aliquam elit enim, efficitur sit amet neque non, feugiat tristique enim. Ut aliquet maximus lacus, eget euismod quam. Donec vehicula ex at libero sodales, sit amet faucibus velit facilisis.
Morbi risus tortor, sollicitudin at lorem quis, convallis molestie enim. Proin efficitur libero leo, et fermentum velit eleifend in. Etiam vitae suscipit arcu. Nunc eu aliquam quam, a sollicitudin enim. Vivamus porttitor id nisl id pharetra. Sed consequat semper orci, sed iaculis arcu convallis sit amet. Donec vitae elementum nunc, ullamcorper accumsan tellus. Cras eu cursus ante.
Sed efficitur, massa a viverra scelerisque, mi magna tincidunt ipsum, ac laoreet lacus nunc quis mi. Pellentesque ut rutrum felis. Morbi euismod nisi elit, ac tristique arcu semper eget. Suspendisse orci augue, auctor quis dapibus vitae, laoreet in quam. In sagittis, odio sed suscipit mattis, risus sapien faucibus nisl, nec commodo nunc urna sit amet urna. Nulla lobortis, tellus nec auctor fermentum, lacus sapien rhoncus quam, at finibus lacus leo vel nisl. Integer eu aliquet erat. Suspendisse maximus blandit ultrices. Nunc sodales eu erat sit amet tincidunt. Nulla molestie nulla ut lectus luctus, vitae sollicitudin mi feugiat. Proin interdum elit quis lorem rhoncus ultricies. Mauris ac dui sit amet nulla lacinia venenatis in sit amet odio.
</div>
I think your problem comes from your grid-template-rows in your __body selector. You have 170% here, your header sticks inside its parent only.
Try with:
.__body {
display: grid;
grid-template-rows: 5.88% 17.64% 23.53% 29.11% 11.76% 11.76%;
You may want to try another unit than % to have something more fluid.
[edit] That's basically what Ori Drori just said :)
I found a way to make it work by giving the header the fixed position instead of sticky and giving it a width and height.
I have a fixed div at the bottom of my page, but it is covering up another div that is behind it. How can I make it where the markup behind the fixed div can be scrolled? My end goal is to have the buttons fixed at the very bottom but if the content is behind the buttons then allow the scrollbar to show. I tried adding an over-flow:auto, but it didn't change. My assumption why that didn't work is because the viewport does think that the div behind the button is viewable...But the fixed position div just has a higher z value so it's just going to cover it anyways. I don't want to add any padding to accommodate the empty space.
Parent Container
.page-container {
padding: 10px;
position: relative;
.page-title {
margin-bottom: 15px;
}
.page-title-fixed {
position: fixed;
left: 0;
right: 0;
margin-top: -15px;
padding: 15px;
margin-bottom: 0;
padding-bottom: 0;
background: $bgGray;
z-index: 999;
.page-title { margin-bottom: 0; }
}
}
Fixed Buttons styling
style={{
position: 'fixed',
bottom: 0,
left: 0,
height: 60,
width: '100%',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f6f6f6',
borderTop: '1px solid #e0e0e0'
}}
If I understand what you're asking, you want to have a fixed element, but you need to be able to scroll down through body content without the fixed element obscuring the body content?
If so, the simplest way is to add padding to the bottom of the body content equivalent to (or higher) than the fixed element. This will ensure that as you scroll all the way down you won't have text fall behind the fixed element.
(If I misunderstood please clarify and I'll try to help further)
.content {
width: 100%;
height:90%;
padding: 20px;
font-family: sans-serif;
/* This doesn't let the text fall behind the fixed element */
padding-bottom: 90px;
}
.fixed {
position: fixed;
bottom: 0;
width: 100%;
height: auto;
background: #007ccc;
color: #fff;
font-family: sans-serif;
padding: 30px 0;
text-align: center;
}
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo tristique orci id tincidunt. Aliquam erat volutpat. Aliquam erat volutpat. Etiam hendrerit, nisi non pharetra laoreet, mauris odio ultricies ligula, id convallis dolor augue vitae velit. Praesent condimentum metus at turpis consequat, sed posuere orci euismod. Suspendisse in quam facilisis, imperdiet dolor at, dignissim risus. Mauris ut libero ante. Donec porttitor nibh sit amet massa tristique efficitur. Aenean commodo vel nisi ac lacinia. Etiam in faucibus enim, eget vehicula sem. Etiam justo nunc, bibendum id ligula nec, ultrices accumsan lorem. Mauris imperdiet augue vitae vulputate efficitur. Donec id sapien dui. Nam lacus nibh, cursus sed laoreet a, feugiat id arcu. Cras sed ultricies nibh, pretium placerat augue.
Maecenas mattis arcu augue, interdum rhoncus mauris condimentum at. Donec pharetra eleifend tincidunt. Sed iaculis orci id ex dapibus scelerisque. Aenean euismod felis sit amet enim dictum, sed pellentesque nisi rutrum. Pellentesque iaculis massa non massa aliquam volutpat. Praesent interdum varius orci, in ullamcorper turpis eleifend at. Phasellus in cursus lacus, at ultricies mauris. Pellentesque tristique tellus non pharetra vulputate. Proin sodales felis est, sit amet ornare turpis blandit eu.
Nulla finibus purus vel elit vehicula, ut tincidunt diam suscipit. Nullam sed congue nisi, eget venenatis felis. Integer hendrerit est sit amet elementum tempor. Duis molestie mi id consequat semper. Donec rutrum sed lectus et pellentesque. Vestibulum sit amet ligula elit. Donec et felis at mi volutpat finibus. Suspendisse vitae libero gravida, gravida erat non, mattis turpis. Cras facilisis porta diam, vel molestie libero hendrerit sed. Proin imperdiet commodo metus non pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tristique elit eu blandit imperdiet. Suspendisse tincidunt turpis at orci tincidunt molestie. Vestibulum dapibus maximus augue, ut cursus ante convallis non.
Nulla id feugiat nulla, at placerat ipsum. Sed id turpis quis mauris vehicula eleifend vel at risus. Vestibulum dictum orci in augue finibus, a lacinia nisi rutrum. Cras vehicula sodales enim sit amet maximus. Donec in justo porta, volutpat mi eget, feugiat elit. Nunc bibendum bibendum quam sit amet pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ipsum tellus, tincidunt nec laoreet sit amet, semper in lorem. Donec suscipit risus quis pellentesque porta. Duis ac felis lobortis, blandit purus eu, dapibus arcu. Nullam semper varius felis nec gravida. Nullam feugiat convallis porta.
Praesent mollis urna ex, a luctus dui tristique et. Nulla bibendum tristique erat, ac consequat ligula suscipit ut. Morbi turpis nulla, facilisis et maximus eu, pretium et magna. Integer egestas est id neque dictum ullamcorper. Etiam consequat dolor at nulla maximus, id dictum dui laoreet. Sed mattis ex in tortor malesuada sagittis. Nulla facilisi. Maecenas sapien erat, pretium ac dignissim nec, tincidunt ut nisi. Quisque tincidunt volutpat dui, ut vulputate nunc lobortis a. Mauris felis nisl, imperdiet varius iaculis sit amet, tempor ac erat. Proin sodales elementum finibus. Fusce ut ultricies nisl, sed venenatis justo. Pellentesque diam urna, semper et risus at, placerat finibus risus.
Sed sagittis mattis lorem, vitae dictum nunc egestas a. Sed pretium orci vitae ipsum pretium posuere. Sed commodo dui eget dignissim luctus. Nullam ullamcorper libero cursus libero lobortis, nec tempus eros varius. Fusce massa ligula, lacinia in quam sit amet, placerat ullamcorper tellus. Donec convallis justo non sem viverra hendrerit. Sed ac vestibulum ipsum, ac euismod augue. Donec tempus dignissim arcu in bibendum. Donec placerat vitae nunc consequat laoreet. Vivamus sagittis interdum arcu et interdum. Aliquam ullamcorper fringilla ultrices. Nulla tempus risus at interdum sagittis. Praesent ultrices, ex at viverra ultricies, lectus augue tempus justo, id luctus leo augue sed urna. Quisque nec mi et risus blandit volutpat. Nulla at purus in nunc tincidunt lacinia et eu libero.
Donec velit nibh, fringilla eu condimentum vitae, dapibus sed nibh. Nunc urna tellus, iaculis non congue id, posuere sit amet neque. Curabitur vehicula finibus orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed facilisis tortor sed mauris vehicula, vel commodo nisi faucibus. Duis sit amet euismod nisi. Duis efficitur, dolor ut ultrices accumsan, purus purus cursus felis, ac sodales libero justo efficitur magna. Morbi tellus tortor, tempor in mauris at, dapibus iaculis diam. Suspendisse condimentum magna nec libero dignissim, eu fermentum justo lobortis. Mauris ut dapibus lacus. Nullam ligula ipsum, posuere id lacus et, ultricies blandit sapien. Integer enim nisl, euismod eu venenatis a, consectetur sit amet ante. Aenean eu porta ipsum.
Aenean a lobortis massa, id efficitur tellus. Maecenas bibendum orci non imperdiet accumsan. Ut luctus magna id mi lacinia, in feugiat justo porta. Phasellus efficitur elementum tellus, in porttitor enim semper non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam cursus justo non aliquam posuere. Nunc tempor eget dui quis rhoncus. Nulla facilisi. Curabitur nec maximus nunc, condimentum accumsan massa.
Fusce justo leo, laoreet quis consectetur sed, cursus sed purus. Sed eget tincidunt velit. Donec id lectus a urna volutpat dictum. Aliquam commodo tincidunt lectus, a viverra enim. Nulla nec ante porttitor nunc sagittis tempus. Praesent volutpat porttitor est nec aliquet. Praesent aliquam aliquam leo laoreet ultricies. Mauris cursus leo at tortor ornare, et dictum libero fringilla. Ut massa est, fringilla eget nisi non, iaculis semper ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue pellentesque arcu ac laoreet. Nam eu malesuada justo.
Ut egestas ornare tellus nec iaculis. Sed sit amet purus eu diam interdum tempus. Integer bibendum dignissim justo. Suspendisse sed arcu faucibus ex aliquet feugiat. Nulla vestibulum, felis sed ultrices varius, tellus purus rutrum diam, vitae molestie enim nulla non dui. Duis ultricies mi tortor, sed molestie sem rhoncus vel. Quisque tincidunt viverra sapien, sed tristique justo volutpat sed. Nunc tempor sit amet nulla vel tincidunt. Suspendisse pellentesque facilisis sapien id faucibus. Donec sodales finibus augue, ut volutpat est auctor sit amet. Sed rutrum, lacus at rhoncus condimentum, tortor lectus porta eros, et blandit nibh elit in diam. Pellentesque semper et metus eget posuere. Integer at velit elit. Praesent non malesuada nisl.
Duis ut lacus tellus. Vivamus aliquam magna eu sem suscipit, non bibendum mauris lobortis. Donec placerat purus eget tortor blandit, at iaculis nibh pretium. Cras quis sollicitudin erat. Ut finibus mollis sem et vehicula. Mauris rutrum gravida blandit. Sed velit mi, congue vel arcu sit amet, mollis laoreet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a hendrerit nunc. Pellentesque aliquam dictum arcu, eu mattis nunc consectetur nec. Fusce a malesuada turpis, in venenatis mi.
Maecenas nisl lorem, hendrerit vel dignissim id, efficitur et ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum molestie neque ut imperdiet vestibulum. Ut a felis et ligula scelerisque venenatis. Donec fermentum ex risus, ac eleifend eros tempor non. Maecenas consectetur purus eu dapibus efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vestibulum magna quis mollis commodo. Proin sed ex mollis, rhoncus turpis cursus, laoreet augue. Maecenas non enim diam. Fusce ultricies malesuada orci. Sed dictum cursus fermentum. Nunc vehicula felis non ex congue, eget fringilla lectus fringilla. Nulla aliquam nec arcu et dictum.
Nulla tincidunt purus sapien, in semper lectus viverra sed. In vulputate ante sit amet elit placerat semper. Duis lorem tellus, tempus in leo tincidunt, iaculis commodo risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vitae vestibulum elit. Ut facilisis lectus sed arcu dapibus facilisis id sed sapien. Nullam varius quam at enim vehicula ullamcorper. Proin nec mauris fringilla, mattis purus ac, efficitur felis. Mauris fringilla tellus non ligula ornare mollis. Aliquam pulvinar condimentum consequat. Nam sed libero non dui placerat ultricies.
Quisque pulvinar eros quis lacus dapibus vestibulum. Morbi quis orci ut nisl auctor auctor quis et dui. Fusce ex quam, aliquam at libero scelerisque, tincidunt euismod nulla. Integer vulputate dui sit amet sodales convallis. Duis porttitor nibh risus, a iaculis elit mattis suscipit. In hendrerit nibh erat, et aliquet magna cursus sit amet. Nullam libero leo, semper quis nulla id, pharetra euismod erat. Nulla vel est at lacus dictum pulvinar. Praesent pretium ante dolor, vel facilisis sapien porttitor sed. Nunc in aliquam ante. Proin consequat consectetur urna, eu pellentesque ipsum pharetra ut. Donec ultrices nisl vitae lorem suscipit consectetur. Phasellus vitae lorem et libero dapibus ullamcorper et eu mi.
Sed sagittis, tellus id congue egestas, felis magna tempor risus, nec dictum felis libero eget nunc. Maecenas id eleifend turpis. Nunc placerat odio dui, ut hendrerit tellus suscipit vitae. Morbi nunc lectus, lacinia scelerisque tortor ut, tincidunt fringilla lorem. Nullam dignissim eros eget ipsum rhoncus efficitur. Donec ac quam sodales, tempus risus vitae, aliquet lectus. Aenean non finibus risus. Mauris maximus egestas metus ut malesuada. Morbi egestas tempor tincidunt. Integer sagittis mi vitae elit sodales vestibulum. Curabitur varius dui a massa hendrerit fringilla. Pellentesque imperdiet ipsum in metus ornare sagittis. Nam eget posuere ante, id hendrerit est. Vestibulum vehicula aliquet odio et ornare. Curabitur augue diam, scelerisque vel dapibus eget, facilisis sed turpis. Morbi auctor faucibus lacus sed accumsan.
Integer consectetur dui nibh, varius ullamcorper lectus feugiat id. Vestibulum massa leo, egestas vestibulum sollicitudin in, convallis sit amet justo. Sed mauris justo, faucibus volutpat facilisis ac, volutpat non leo. Vestibulum convallis magna a massa rhoncus accumsan. Quisque et semper dui. Suspendisse euismod erat vel magna fringilla fermentum. Fusce pellentesque egestas tellus, mattis maximus metus rutrum quis. Nulla pharetra vitae turpis ut venenatis. Aliquam maximus urna nunc, sit amet posuere tellus fringilla nec.
Pellentesque viverra orci vel eros rhoncus, in feugiat elit laoreet. Donec sed nulla lorem. Donec sed ipsum eros. Vivamus metus dolor, tristique at ex sit amet, semper condimentum tortor. Vivamus et elementum libero. Phasellus laoreet lectus turpis, ac vestibulum urna finibus a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer nec rhoncus enim, et congue orci. Nam rutrum non mi id vulputate. Sed sit amet nisi varius, mollis turpis ut, suscipit nunc. Maecenas varius nibh ac volutpat venenatis.
Vivamus vitae scelerisque sem, id elementum ligula. Mauris tristique vitae metus et tincidunt. Integer at porta neque, eget tincidunt nunc. Donec non lobortis lacus. Aenean ac rhoncus mauris, quis congue leo. In vel condimentum risus, eget tincidunt nibh. In sollicitudin lacinia dui, quis tempus lorem faucibus ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Cras eu est vitae metus maximus tempus ut gravida odio.
Etiam ut faucibus arcu. Praesent ac congue urna. Integer suscipit erat at elit vulputate dignissim. Praesent ornare quis nisl eu efficitur. Morbi iaculis turpis nisl, non mattis dolor molestie nec. Nullam in erat quam. Quisque eros nunc, placerat sed enim a, vestibulum ultricies diam. Vestibulum tempus volutpat ullamcorper. Morbi semper purus ultricies diam molestie faucibus. Aliquam ullamcorper viverra purus vel vehicula. Pellentesque fermentum congue libero, laoreet lobortis dui commodo sit amet. Donec vel orci id lorem faucibus convallis nec in ipsum.
Morbi nec ipsum pulvinar, interdum justo eu, vestibulum nisl. Fusce tristique blandit lacus, a lacinia lacus consectetur nec. Sed hendrerit ornare urna tincidunt euismod. Sed venenatis felis ipsum, vitae euismod nisi iaculis eu. Quisque placerat id ipsum ut scelerisque. Quisque dignissim magna dignissim magna aliquam consectetur. Integer efficitur convallis arcu, et mollis magna eleifend id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eleifend luctus fermentum. Cras id nisl nec urna suscipit eleifend. LAST LINE OF TEXT.</div>
<div class="fixed">FIXED CONTENT HERE</div>
I've been trying to find a solution to this, but I dont know if maybe Im not wording it correctly because I can't seem to find an answer.
I have a page with a 'quick links' button which is designed to float against the right hand side of the screen while scrolling.
I have used the following to get the effect (the right attriubte is to hide the menu which shows when you click on the element.)
#quickLinks {
position: fixed;
display: block;
top: 50%;
z-index: 2;
right: -250px;
}
This is all working pretty fine, but I've found that im struggling to accomodate when a scroll bar is present or not.
So ive added a bit of 'padding' to the right attribute to stick out a little when there is a scroll bar (which my page generally has), but since there is no scroll bar visible on an ipad, for instance, there is that padded gap.
Ive noticed that using 'absolute' rather than fixed seems to get the hugging effect right, but then I lose the floating scroll.
Any ideas or suggestions would be greatly appreciated. :)
thanks!
This seems like you have some other conflict in your CSS causing the issue. You might want to post your CSS file to help debug. Doing a simple fiddle like this in all browsers produces the same result - the fixed div moves slightly to the left when a scroll bar is present. To see the difference, remove some of the Lorem Ipsum text.
.right {
background: blue;
padding: 20px;
position: fixed;
right: 0;
top: 100px
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac metus eleifend, viverra felis at, semper elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean augue sapien, efficitur at felis at, mollis
iaculis ante. Nullam mattis risus eget ante tempor, non laoreet libero rutrum. Donec massa dui, venenatis in fringilla ut, commodo id dui. Morbi iaculis ipsum sit amet enim venenatis, ac lacinia enim sollicitudin. Integer porttitor aliquam sollicitudin.
Aenean elementum a orci a iaculis.</p>
<p>Quisque sit amet tortor non augue rhoncus sagittis in non felis. Etiam pulvinar enim viverra turpis pellentesque, ut sollicitudin turpis fermentum. Nulla facilisi. Etiam sagittis dui nec velit feugiat imperdiet. Suspendisse efficitur quam in urna porttitor,
quis tempor ex lacinia. Quisque a mattis ante, sed dapibus risus. Nulla nec massa eu leo molestie maximus sed nec libero. Cras eget aliquet nisl, a pharetra tellus. Cras a sem id ligula aliquet mollis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Donec volutpat, ipsum sit amet cursus laoreet, dui massa dapibus nisi, id finibus sem nisl id dui. Vestibulum aliquet lobortis enim, ut ultrices ante. Praesent faucibus pharetra sem quis mollis.</p>
<p>Curabitur convallis sollicitudin neque nec tincidunt. Morbi tristique blandit rutrum. Nullam sed imperdiet urna, id rutrum tortor. Aenean non dolor tempor nulla egestas placerat eu vitae magna. Sed vitae feugiat tellus. Aenean ut urna posuere, lacinia
neque ac, efficitur sem. Phasellus at tempor turpis, non ullamcorper urna. Donec in massa euismod, euismod nisi quis, sodales turpis. Suspendisse ut lacus non massa molestie rhoncus. Duis quis dui tristique, sodales sapien vel, porta nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices tincidunt lacus et pulvinar.</p>
<p>Sed placerat odio eros, eget elementum enim tempor vitae. Sed sed laoreet nulla. Nam justo augue, ornare a quam eu, placerat luctus risus. Aenean lobortis in ex sit amet pretium. Fusce iaculis lorem arcu, posuere lacinia velit laoreet sit amet. Donec
malesuada, elit quis rutrum ullamcorper, purus libero volutpat quam, at bibendum turpis urna vel justo. Nunc aliquet lobortis ex vitae dapibus. Nullam laoreet ullamcorper enim, dapibus posuere massa pharetra at.</p>
<p>Integer hendrerit maximus mauris consectetur lobortis. Donec magna arcu, luctus vehicula lacus in, molestie tempus metus. Donec sollicitudin, metus sed imperdiet consequat, risus mauris placerat ligula, et volutpat ex enim nec ipsum. Morbi massa risus,
dignissim sit amet nisl ac, efficitur lobortis dolor. Duis id porta odio. Suspendisse tempus porta erat, et laoreet lectus luctus non. Etiam vel neque et ligula cursus sodales. Nunc finibus, tortor ac rhoncus venenatis, odio nisl suscipit turpis,
ac convallis enim quam a urna. Nam condimentum risus in magna fermentum scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac metus eleifend, viverra felis at, semper elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean augue sapien, efficitur at felis at, mollis
iaculis ante. Nullam mattis risus eget ante tempor, non laoreet libero rutrum. Donec massa dui, venenatis in fringilla ut, commodo id dui. Morbi iaculis ipsum sit amet enim venenatis, ac lacinia enim sollicitudin. Integer porttitor aliquam sollicitudin.
Aenean elementum a orci a iaculis.</p>
<p>Quisque sit amet tortor non augue rhoncus sagittis in non felis. Etiam pulvinar enim viverra turpis pellentesque, ut sollicitudin turpis fermentum. Nulla facilisi. Etiam sagittis dui nec velit feugiat imperdiet. Suspendisse efficitur quam in urna porttitor,
quis tempor ex lacinia. Quisque a mattis ante, sed dapibus risus. Nulla nec massa eu leo molestie maximus sed nec libero. Cras eget aliquet nisl, a pharetra tellus. Cras a sem id ligula aliquet mollis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Donec volutpat, ipsum sit amet cursus laoreet, dui massa dapibus nisi, id finibus sem nisl id dui. Vestibulum aliquet lobortis enim, ut ultrices ante. Praesent faucibus pharetra sem quis mollis.</p>
<p>Curabitur convallis sollicitudin neque nec tincidunt. Morbi tristique blandit rutrum. Nullam sed imperdiet urna, id rutrum tortor. Aenean non dolor tempor nulla egestas placerat eu vitae magna. Sed vitae feugiat tellus. Aenean ut urna posuere, lacinia
neque ac, efficitur sem. Phasellus at tempor turpis, non ullamcorper urna. Donec in massa euismod, euismod nisi quis, sodales turpis. Suspendisse ut lacus non massa molestie rhoncus. Duis quis dui tristique, sodales sapien vel, porta nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices tincidunt lacus et pulvinar.</p>
<p>Sed placerat odio eros, eget elementum enim tempor vitae. Sed sed laoreet nulla. Nam justo augue, ornare a quam eu, placerat luctus risus. Aenean lobortis in ex sit amet pretium. Fusce iaculis lorem arcu, posuere lacinia velit laoreet sit amet. Donec
malesuada, elit quis rutrum ullamcorper, purus libero volutpat quam, at bibendum turpis urna vel justo. Nunc aliquet lobortis ex vitae dapibus. Nullam laoreet ullamcorper enim, dapibus posuere massa pharetra at.</p>
<p>Integer hendrerit maximus mauris consectetur lobortis. Donec magna arcu, luctus vehicula lacus in, molestie tempus metus. Donec sollicitudin, metus sed imperdiet consequat, risus mauris placerat ligula, et volutpat ex enim nec ipsum. Morbi massa risus,
dignissim sit amet nisl ac, efficitur lobortis dolor. Duis id porta odio. Suspendisse tempus porta erat, et laoreet lectus luctus non. Etiam vel neque et ligula cursus sodales. Nunc finibus, tortor ac rhoncus venenatis, odio nisl suscipit turpis,
ac convallis enim quam a urna. Nam condimentum risus in magna fermentum scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac metus eleifend, viverra felis at, semper elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean augue sapien, efficitur at felis at, mollis
iaculis ante. Nullam mattis risus eget ante tempor, non laoreet libero rutrum. Donec massa dui, venenatis in fringilla ut, commodo id dui. Morbi iaculis ipsum sit amet enim venenatis, ac lacinia enim sollicitudin. Integer porttitor aliquam sollicitudin.
Aenean elementum a orci a iaculis.</p>
<p>Quisque sit amet tortor non augue rhoncus sagittis in non felis. Etiam pulvinar enim viverra turpis pellentesque, ut sollicitudin turpis fermentum. Nulla facilisi. Etiam sagittis dui nec velit feugiat imperdiet. Suspendisse efficitur quam in urna porttitor,
quis tempor ex lacinia. Quisque a mattis ante, sed dapibus risus. Nulla nec massa eu leo molestie maximus sed nec libero. Cras eget aliquet nisl, a pharetra tellus. Cras a sem id ligula aliquet mollis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Donec volutpat, ipsum sit amet cursus laoreet, dui massa dapibus nisi, id finibus sem nisl id dui. Vestibulum aliquet lobortis enim, ut ultrices ante. Praesent faucibus pharetra sem quis mollis.</p>
<p>Curabitur convallis sollicitudin neque nec tincidunt. Morbi tristique blandit rutrum. Nullam sed imperdiet urna, id rutrum tortor. Aenean non dolor tempor nulla egestas placerat eu vitae magna. Sed vitae feugiat tellus. Aenean ut urna posuere, lacinia
neque ac, efficitur sem. Phasellus at tempor turpis, non ullamcorper urna. Donec in massa euismod, euismod nisi quis, sodales turpis. Suspendisse ut lacus non massa molestie rhoncus. Duis quis dui tristique, sodales sapien vel, porta nunc. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ultrices tincidunt lacus et pulvinar.</p>
<p>Sed placerat odio eros, eget elementum enim tempor vitae. Sed sed laoreet nulla. Nam justo augue, ornare a quam eu, placerat luctus risus. Aenean lobortis in ex sit amet pretium. Fusce iaculis lorem arcu, posuere lacinia velit laoreet sit amet. Donec
malesuada, elit quis rutrum ullamcorper, purus libero volutpat quam, at bibendum turpis urna vel justo. Nunc aliquet lobortis ex vitae dapibus. Nullam laoreet ullamcorper enim, dapibus posuere massa pharetra at.</p>
<p>Integer hendrerit maximus mauris consectetur lobortis. Donec magna arcu, luctus vehicula lacus in, molestie tempus metus. Donec sollicitudin, metus sed imperdiet consequat, risus mauris placerat ligula, et volutpat ex enim nec ipsum. Morbi massa risus,
dignissim sit amet nisl ac, efficitur lobortis dolor. Duis id porta odio. Suspendisse tempus porta erat, et laoreet lectus luctus non. Etiam vel neque et ligula cursus sodales. Nunc finibus, tortor ac rhoncus venenatis, odio nisl suscipit turpis,
ac convallis enim quam a urna. Nam condimentum risus in magna fermentum scelerisque.</p>
</div>
<div class="right">
I'm floating on the right!
</div>
https://jsfiddle.net/uy1tgdew/1/
I'm trying to get a scroll bar on my inner-body wrapper, instead of the body itself:
CSS
body {
overflow: hidden;
}
#body_wrap {
overflow-y: auto;
height: 100%;
}
HTML
<body class="index"><div id="body_wrap">
<!-- Content with big height -->
</div> </body>
The content overflows (ie: if I strip all style there are vertical scrollbars). But with the above styling I don't get any scrollbars. I would expet the result to be similar in both cases at the moment, as the #body_wrap wraps the whole content. Yet I get no scrollbars on #body_wrap.
How can I hide the scrollbars from body and have them on the child wrapper instead?
Since you are using a percentage height on #body_wrap, you'll need a height on <html> and <body> to which it will be relative. Without it, you're calculating 100% of undefined.
html,
body {
height: 100%;
}
body {
overflow: hidden;
}
#body_wrap {
font-size: 30px;
overflow-y: auto;
height: 100%;
}
<div id="body_wrap">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor.
Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id
egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam
vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium
enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc. Proin at eros non eros adipiscing mollis. Donec
semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus
aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas
mattis pulvinar diam. Curabitur sed leo. Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet
lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus.
Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis. Mauris sollicitudin, turpis in hendrerit sodales, lectus ipsum pellentesque ligula, sit amet scelerisque urna nibh ut arcu. Aliquam in lacus. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Nulla placerat aliquam wisi. Mauris viverra odio. Quisque fermentum pulvinar odio. Proin posuere est vitae ligula. Etiam euismod. Cras a eros. Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam
enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec,
mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim. Pellentesque vel dui
sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam
pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris
elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue. Suspendisse vestibulum dignissim quam. Integer vel augue. Phasellus nulla purus, interdum ac, venenatis non, varius rutrum, leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis a eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce magna mi, porttitor quis, convallis eget, sodales
ac, urna. Phasellus luctus venenatis magna. Vivamus eget lacus. Nunc tincidunt convallis tortor. Duis eros mi, dictum vel, fringilla sit amet, fermentum id, sem. Phasellus nunc enim, faucibus ut, laoreet in, consequat id, metus. Vivamus dignissim. Cras
lobortis tempor velit. Phasellus nec diam ac nisl lacinia tristique. Nullam nec metus id mi dictum dignissim. Nullam quis wisi non sem lobortis condimentum. Phasellus pulvinar, nulla non aliquam eleifend, tortor wisi scelerisque felis, in sollicitudin
arcu ante lacinia leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
</div>
View on jsFiddle