I have a flexbox A with 100vh height.
This flexbox contains a child flexbox B.
Flexbox B has one child with very long content. I want this very long to overflow inside it's div. Instead, flexbox A expands outside viewport.
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
My real code is more complex (vuejs components). Is there a way to fix this code ?
Update your code like below:
body {
margin: 0;
}
.parent {
height: 100vh;
display: flex;
flex-direction: column;
}
.child1,
.child21 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child2 {
min-height: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.child21 {
background: green;
}
.child22 {
overflow: auto;
}
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra viverra, orci
dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus. Nunc facilisis
orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum, non luctus sapien
vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed lobortis arcu sit
amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est. Nulla in nulla sagittis,
ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat risus volutpat eu. Nulla
pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
just add a height to your div with .child22 class as followed:
Learn more about overflow
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
height:50px;
overflow: auto;
}
<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>
Related
for a personal project I'm using Nextjs and locomotive-scroll, I'm trying to stick an element with position:sticky; and data-scroll-sticky but it's still not work, here is the code:
import LocomotiveScroll from "https://cdn.skypack.dev/locomotive-scroll#4.1.4";
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
body {
padding: 0;
margin: 0;
}
.sticky {
position: sticky;
z-index: 1;
background-color: black;
color: white;
}
<div data-scroll-container>
<section id="section-1" data-scroll-section>
<div class="sticky" data-scroll data-scroll-sticky data-scroll-target="#section-1">
sticky content
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis suscipit ut orci nec malesuada. Integer condimentum auctor orci, non aliquam ex finibus blandit. Pellentesque suscipit mi egestas augue elementum consectetur. Sed suscipit, metus ut tempor
hendrerit, nulla leo auctor sapien, a mollis neque lorem vitae sapien. Curabitur eleifend, metus eu luctus malesuada, tortor est facilisis est, ut tempor libero lorem et nisl. Donec vitae gravida augue, in finibus lectus. Integer gravida elementum
mi ut ultricies. Mauris non blandit dui. Praesent quis ante et orci sollicitudin molestie feugiat ac magna. Sed vitae tincidunt urna, vitae placerat tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus molestie felis nibh, in lobortis purus malesuada ac. Proin pellentesque sodales quam, at lacinia odio cursus et. Vestibulum blandit felis quis orci tincidunt, sit amet dignissim nibh porttitor. Nullam urna lorem, convallis lacinia ipsum
sit amet, efficitur interdum elit. Donec sit amet lobortis nibh. Mauris molestie augue nunc. Nam eget lacinia nisl, ut ullamcorper nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam malesuada
pellentesque risus quis dapibus. Vivamus a enim iaculis, sollicitudin nisi a, dapibus lectus. Nullam malesuada est tortor, ut aliquet mi faucibus et. Suspendisse egestas tincidunt commodo. Quisque nibh metus, egestas et commodo quis, sollicitudin
eget justo. Proin vestibulum leo est, vitae euismod nibh ornare ac. Curabitur tempus orci metus, vel sodales dui malesuada ut. Integer lobortis eros justo, sit amet feugiat odio rutrum non. Pellentesque molestie porttitor est et tempus. Etiam quis
lorem urna. Quisque quam ex, pulvinar at eleifend nec, iaculis quis nisi. In feugiat laoreet consectetur. Suspendisse molestie, nibh ullamcorper suscipit cursus, diam libero consequat ex, in sodales est augue ut ante. Curabitur dapibus iaculis magna
nec cursus. Donec convallis iaculis massa nec vulputate. Etiam elementum, urna sit amet ullamcorper pretium, enim arcu tincidunt mauris, non laoreet augue felis eu felis. Praesent hendrerit ullamcorper maximus. In pretium dui vitae odio accumsan
ultricies. In interdum quis tortor quis viverra. Duis mi sem, cursus ac est sed, commodo venenatis ante. Proin ac ipsum nisi. Donec vestibulum ultrices risus, vitae aliquet quam rutrum eu. Suspendisse a arcu nec nulla molestie porta nec non enim.
Nulla facilisis, urna in convallis feugiat, ligula magna viverra ex, quis pharetra felis erat quis est. Proin dictum accumsan quam non fringilla. Etiam bibendum, ipsum non rhoncus malesuada, quam ligula cursus nisi, eget maximus erat odio nec enim.
Nunc ut porttitor nibh. Pellentesque neque velit, feugiat quis dapibus eget, ultrices ut odio. Fusce iaculis fermentum ipsum sed porta. Nam elit orci, euismod sit amet sapien vitae, mollis gravida ligula. Nulla egestas, est id rutrum consectetur,
arcu nibh gravida augue, sit amet efficitur magna enim in urna. Vestibulum eu lacus dictum, interdum ipsum ut, placerat enim. Quisque posuere mi turpis, quis placerat turpis mattis vitae. Nulla in felis at dui auctor aliquam blandit a mi. Cras vitae
viverra dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>
<section id="section-2" data-scroll-section>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</section>
</div>
codepen
thank u all
You need to include locomotive-scroll.css as stated in the documentation.
It should make your code work without the empty gap that appears at the beginning of the page. It will also add the CSS styling required for the locomotive-scroll to work properly.
import LocomotiveScroll from "https://cdn.skypack.dev/locomotive-scroll#4.1.4";
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
#import url(https://raw.githubusercontent.com/locomotivemtl/locomotive-scroll/master/dist/locomotive-scroll.css);
body {
padding: 0;
margin: 0;
}
.sticky {
position: sticky;
z-index: 1;
background-color: black;
color: white;
top: 0;
}
/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
overflow: hidden;
}
html.has-scroll-dragging {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.has-scroll-smooth body {
overflow: hidden;
}
.has-scroll-smooth [data-scroll-container] {
min-height: 100vh;
}
[data-scroll-direction="horizontal"] [data-scroll-container] {
height: 100vh;
display: inline-block;
white-space: nowrap;
}
[data-scroll-direction="horizontal"] [data-scroll-section] {
display: inline-block;
vertical-align: top;
white-space: nowrap;
height: 100%;
}
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100%;
transform-origin: center right;
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.c-scrollbar:hover {
transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
opacity: 1;
}
[data-scroll-direction="horizontal"] .c-scrollbar {
width: 100%;
height: 10px;
top: auto;
bottom: 0;
transform: scaleY(1);
}
[data-scroll-direction="horizontal"] .c-scrollbar:hover {
transform: scaleY(1.3);
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: -webkit-grab;
cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
cursor: -webkit-grabbing;
cursor: grabbing;
}
[data-scroll-direction="horizontal"] .c-scrollbar_thumb {
right: auto;
bottom: 0;
}
<div data-scroll-container>
<section id="section-1" data-scroll-section>
<div class="sticky" data-scroll data-scroll-sticky data-scroll-target="#section-1">
sticky content
</div>
<div>
ulum ultrices risus, vitae aliquet quam rutrum eu. Suspendisse a arcu nec nulla molestie porta nec non enim. Nulla facilisis, urna in convallis feugiat, ligula magna viverra ex, quis pharetra felis erat quis est. Proin dictum accumsan quam non fringilla.
Etiam bibendum, ipsum non rhoncus malesuada, quam ligula cursus nisi, eget maximus erat odio nec enim. Nunc ut porttitor nibh. Pellentesque neque velit, feugiat quis dapibus eget, ultrices ut odio. Fusce iaculis fermentum ipsum sed porta. Nam elit
orci, euismod sit amet sapien vitae, mollis gravida ligula. Nulla egestas, est id rutrum consectetur, arcu nibh gravida augue, sit amet efficitur magna enim in urna. Vestibulum eu lacus dictum, interdum ipsum ut, placerat enim. Quisque posuere mi
turpis, quis placerat turpis mattis vitae. Nulla in felis at dui auctor aliquam blandit a mi. Cras vitae viverra dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>
<section id="section-2" data-scroll-section>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget
dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncte eleifend tellus. Aenean leo ligula, porttitor
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue
velit cursus nunc,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus
varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem
neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis
leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</section>
</div>
First question here; so i hope you can help me! I am sorry in advance if i forgot any info!;)
I have a div with a background in it. The background needs to be scaled to fit the whole width of the screen; this works and the background image does remain its aspect ratio. But the problem is that the screen cuts of the height, i expect a scrollbar to scroll down to see the whole background image.
Can somebody help me with this problem?
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x400/000/fff");
background-repeat: no-repeat;
background-size: cover;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
.body {
padding: 0px;
margin: 0px;
height: 100%;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>
Use an image tag
<div class="firstdiv"><img src="./Afbeelding_Landingspagina.png"/></div>
remove overflow hidden, add width and height to image
.firstdiv {
overflow: visible;
}
.firstdiv > img {
widht: 100%;
height: 100%;
}
If you want to display text on top of the image without messing up you can use z-index and position: abosolute. For example
.firstdiv > p {
z-index: 999;
position: absolute;
top: 10px;
}
Set your body with height: auto;
Set in your .firstDiv the background-position:center; min-height:100vh; this will make it the whole div height and keeps the image aspect ratio.
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x600/0011ff/f50e0e");
background-repeat: no-repeat;
background-size: cover;
background-position:center;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
min-height:100vh;
}
.body {
padding: 0px;
margin: 0px;
height: auto;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>
I changed everything to the IMG solution, as i want the background-image larger then screen this seems to be the better solution.
THis solutions works on most devices; but i still have one problem:
It looks like the second div overflows the first div.
This is how it should be
This is how it looks on bigger screen
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div class= "firstdiv"><img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
</body>
</html>
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
max-height; 100%;
}
This question already has answers here:
sticky position on css grid items
(3 answers)
Closed 2 years ago.
I have a layout with 3 columns when large then for mobile i resize it to each row the full width of the grid on mobile. When large I need column 1 and 3 to be sticky to the top when column 2 is scrolling. I made an example here on codesandbox.
Here is also the css from the sandbox:
.App {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-template-areas: "col1 col2 col3";
}
.column1 {
background-color: aquamarine;
grid-area: col1;
}
.column2 {
background-color: rebeccapurple;
grid-area: col2;
}
.column3 {
background-color: orange;
grid-area: col3;
}
#media only screen and (max-width: 800px) {
.App {
color: red;
grid-template-areas:
"col1 col1 col1"
"col3 col3 col3"
"col2 col2 col2";
}
}
I've tried making position sticky on .column1 but it still didnt stick to the top. Think of .column1 and .column3 as a sidebar filter. Also when on mobile dont make the columns sticky to the top
You need to set an height on the grid itself and overflow on the column supposed to scroll ( if i understood your trouble)
body {
margin: 0;
}
.App {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-template-areas: "col1 col2 col3";
height: 100vh;
}
.column1 {
background-color: aquamarine;
grid-area: col1;
}
.column2 {
background-color: rebeccapurple;
grid-area: col2;
overflow: auto;
}
.column3 {
background-color: orange;
grid-area: col3;
}
#media only screen and (max-width: 800px) {
.App {
height:auto;
color: red;
grid-template-areas:
"col1 col1 col1"
"col3 col3 col3"
"col2 col2 col2";
}
}
<div class="App">
<div class="column1">Column 1</div>
<div class="column2">
<h1>Column 2</h1>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Ut ex purus, lobortis eget dapibus sed, elementum nec tortor.
Fusce vehicula lobortis maximus. Phasellus eu ante ut massa molestie
laoreet non eget ante. Duis diam nisi, porttitor eu libero eget, commodo
tincidunt velit. Quisque a urna a quam eleifend faucibus. Integer id est
et sem placerat scelerisque. Ut tempor condimentum euismod. Phasellus a
faucibus sem. Vestibulum id interdum ligula. Proin vel tellus eget
libero convallis finibus sit amet vel tellus. Suspendisse potenti.
Mauris at eros nec nulla luctus interdum. Sed non cursus diam, vitae
commodo quam. Nam viverra quam non imperdiet sagittis. Vestibulum quis
justo ut risus varius hendrerit ac et ex. Vestibulum volutpat a felis ac
porta. Sed faucibus vitae sapien a tincidunt. Quisque ut magna in ligula
scelerisque tincidunt et ac est. Proin vitae interdum felis. Ut sem
enim, dapibus cursus vulputate commodo, venenatis ut turpis. In
dignissim sapien sit amet lorem aliquam posuere. Suspendisse vel enim
commodo, posuere orci quis, eleifend mi. Quisque in massa vitae metus
rhoncus sollicitudin. Vestibulum auctor pharetra orci non eleifend.
Donec ornare mauris mi, non sagittis odio posuere ut. Nunc quis ultrices
ex. Vestibulum massa dui, congue eu vestibulum id, cursus sit amet
turpis. Donec posuere, mauris id finibus cursus, lacus tortor fermentum
odio, vel tempor leo velit ut velit. Mauris rhoncus tempor nunc, a
aliquam purus tempus in. Cras imperdiet laoreet nunc, et efficitur odio
bibendum sit amet. Cras mattis sem non ex gravida, id suscipit nisl
lobortis. Nunc efficitur vehicula nisi ac gravida. Ut auctor dignissim
quam, at pulvinar velit vestibulum ut. Fusce nisi augue, porttitor at
commodo sit amet, porttitor a quam. Vestibulum sit amet lobortis ipsum,
a sodales tellus. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec efficitur consequat risus, vel
dignissim orci vehicula auctor. Mauris congue justo non augue
scelerisque, et imperdiet elit faucibus. Nam velit sem, luctus sit amet
nunc vel, feugiat eleifend justo. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque sodales est eget dui accumsan
laoreet. Aenean tincidunt tempor volutpat. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Aenean
nec viverra leo. Cras ut sapien scelerisque, fermentum ex nec, dapibus
velit. Vestibulum rhoncus et est nec accumsan. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Curabitur a eros justo. Vivamus efficitur eros vel sollicitudin blandit.
Vivamus non elementum purus, vitae eleifend eros. Ut sed sodales leo, ac
pharetra quam. Nunc non libero orci. Duis dapibus lacus eu tortor
feugiat finibus. Nulla laoreet aliquet commodo. Nam mauris nunc, varius
sit amet faucibus vitae, facilisis porta nulla. Donec id eleifend metus,
a laoreet ex. Praesent ac nisi pulvinar, ullamcorper ligula ac,
imperdiet ligula. Nullam diam justo, vulputate vitae ligula et, placerat
condimentum lorem. Cras bibendum lectus a eleifend feugiat. Proin
bibendum eget massa at pulvinar. Ut vel aliquam urna. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Ut ex purus, lobortis eget
dapibus sed, elementum nec tortor. Fusce vehicula lobortis maximus.
Phasellus eu ante ut massa molestie laoreet non eget ante. Duis diam
nisi, porttitor eu libero eget, commodo tincidunt velit. Quisque a urna
a quam eleifend faucibus. Integer id est et sem placerat scelerisque. Ut
tempor condimentum euismod. Phasellus a faucibus sem. Vestibulum id
interdum ligula. Proin vel tellus eget libero convallis finibus sit amet
vel tellus. Suspendisse potenti. Mauris at eros nec nulla luctus
interdum. Sed non cursus diam, vitae commodo quam. Nam viverra quam non
imperdiet sagittis. Vestibulum quis justo ut risus varius hendrerit ac
et ex. Vestibulum volutpat a felis ac porta. Sed faucibus vitae sapien a
tincidunt. Quisque ut magna in ligula scelerisque tincidunt et ac est.
Proin vitae interdum felis. Ut sem enim, dapibus cursus vulputate
commodo, venenatis ut turpis. In dignissim sapien sit amet lorem aliquam
posuere. Suspendisse vel enim commodo, posuere orci quis, eleifend mi.
Quisque in massa vitae metus rhoncus sollicitudin. Vestibulum auctor
pharetra orci non eleifend. Donec ornare mauris mi, non sagittis odio
posuere ut. Nunc quis ultrices ex. Vestibulum massa dui, congue eu
vestibulum id, cursus sit amet turpis. Donec posuere, mauris id finibus
cursus, lacus tortor fermentum odio, vel tempor leo velit ut velit.
Mauris rhoncus tempor nunc, a aliquam purus tempus in. Cras imperdiet
laoreet nunc, et efficitur odio bibendum sit amet. Cras mattis sem non
ex gravida, id suscipit nisl lobortis. Nunc efficitur vehicula nisi ac
gravida. Ut auctor dignissim quam, at pulvinar velit vestibulum ut.
Fusce nisi augue, porttitor at commodo sit amet, porttitor a quam.
Vestibulum sit amet lobortis ipsum, a sodales tellus. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec efficitur consequat risus, vel dignissim orci vehicula
auctor. Mauris congue justo non augue scelerisque, et imperdiet elit
faucibus. Nam velit sem, luctus sit amet nunc vel, feugiat eleifend
justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque sodales est eget dui accumsan laoreet. Aenean tincidunt
tempor volutpat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Aenean nec viverra leo. Cras ut
sapien scelerisque, fermentum ex nec, dapibus velit. Vestibulum rhoncus
et est nec accumsan. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur a eros justo.
Vivamus efficitur eros vel sollicitudin blandit. Vivamus non elementum
purus, vitae eleifend eros. Ut sed sodales leo, ac pharetra quam. Nunc
non libero orci. Duis dapibus lacus eu tortor feugiat finibus. Nulla
laoreet aliquet commodo. Nam mauris nunc, varius sit amet faucibus
vitae, facilisis porta nulla. Donec id eleifend metus, a laoreet ex.
Praesent ac nisi pulvinar, ullamcorper ligula ac, imperdiet ligula.
Nullam diam justo, vulputate vitae ligula et, placerat condimentum
lorem. Cras bibendum lectus a eleifend feugiat. Proin bibendum eget
massa at pulvinar. Ut vel aliquam urna.
</div>
<div class="column3">Column 3</div>
</div>
For a sticky layout and the scroll on the right see https://codesandbox.io/s/sleepy-brook-3ut30 sticky column's background is drawn from the parent container , since sticky will unstick once reaching the end of the parent and scrolling along with it.
I got something like this: https://jsfiddle.net/q0apor3u/10/
.layout-grid__navbar { grid-area: navbar; }
.layout-grid__sidebar { grid-area: sidebar; }
.layout-grid__header { grid-area: header; }
.layout-grid__main { grid-area: main; }
.layout-grid__aside { grid-area: aside; }
.layout-grid__footer { grid-area: footer; }
.layout {
display: grid;
grid-template-areas:
"navbar navbar navbar"
"sidebar header aside"
"sidebar main aside"
"sidebar footer aside";
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto 1fr auto;
height: 100vh;
}
.layout-grid__navbar {
height: 60px;
}
.layout-grid__sidebar {
width: 240px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="layout">
<header class="layout-grid__navbar bg-success">
Navbar
</header>
<nav class="layout-grid__sidebar bg-primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim tellus quis nibh euismod, a volutpat magna vestibulum. Nunc a laoreet mauris, in ullamcorper felis. Donec porttitor cursus vestibulum. Maecenas nunc massa, laoreet nec erat ut, commodo consectetur leo. Cras imperdiet, justo sit amet luctus sollicitudin, massa velit luctus sem, non rutrum sapien magna eget erat. Maecenas ornare tortor ac lorem bibendum ullamcorper. Morbi eget mi quam. Quisque pellentesque sapien eu urna laoreet, in sollicitudin urna tempor. Morbi a faucibus augue, vitae aliquam leo. Nunc efficitur, orci in rutrum mattis, lacus eros pretium sem, a vestibulum nisi sem vel nisi.Nulla ultricies, nisi et sodales semper, justo nisi imperdiet sapien, quis pulvinar dui lorem quis enim. Integer sed erat auctor sapien fermentum mattis a eget velit. Pellentesque a tempor est. Vivamus ullamcorper, tortor at feugiat cursus, sapien mauris imperdiet magna, ac accumsan ante nisl quis dolor. Sed rhoncus justo est, vel dapibus sapien posuere sit amet. Aenean consequat ultricies felis a ultricies. Vivamus et semper quam, et facilisis ligula. Sed sed ex vitae mauris aliquet imperdiet. Donec nec ornare ligula. Sed imperdiet aliquam viverra.Duis vestibulum massa orci, eu iaculis massa ullamcorper vel. Quisque ac pharetra libero. Nulla at augue neque. Donec porttitor est a arcu vehicula, ac fermentum elit molestie. Nullam vulputate lectus nec orci tincidunt feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eget elit ac sapien pretium mollis vitae euismod nunc. Proin ligula nulla, viverra ut mi quis, imperdiet egestas ligula. Donec quis sodales turpis, sed elementum nisl. Phasellus ac tempor diam. Aenean tempor est leo. Cras tincidunt volutpat eros, id rutrum justo blandit quis. Praesent suscipit nec justo sit amet volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec mollis, neque vel porttitor lobortis, arcu metus aliquam tortor, ac consectetur lorem quam vitae felis. Suspendisse potenti.Donec pharetra est eget turpis consectetur, nec lacinia neque laoreet. Nam tempus pulvinar eros, vitae tincidunt lectus ultricies tempor. Donec risus justo, congue sit amet mollis pharetra, pharetra ac erat. Vivamus malesuada efficitur elit, at pellentesque augue lobortis eget. Mauris ut scelerisque ligula. Donec ut leo malesuada, facilisis ex nec, mattis turpis. Nulla consectetur quam at velit faucibus, non semper lectus egestas. Maecenas et accumsan velit, id accumsan augue.Maecenas tempor diam sem, non malesuada libero faucibus ac. Nullam finibus ipsum pharetra enim convallis, a suscipit urna tincidunt. Sed accumsan arcu eget massa consequat consequat. Maecenas eu tincidunt felis, et aliquam ipsum. Suspendisse vestibulum posuere mi sed semper. Pellentesque mattis commodo dictum. Nulla eget lorem leo. Quisque convallis scelerisque tellus a pharetra. Integer suscipit arcu id turpis tincidunt, vel fermentum sem feugiat. Fusce convallis dignissim lobortis. Curabitur in vehicula nibh, at commodo odio.
</nav>
<header class="layout-grid__header bg-warning">
Header
</header>
<main class="layout-grid__main bg-danger">
Main
</main>
<aside class="layout-grid__aside bg-dark">
Aside
</aside>
<footer class="layout-grid__footer bg-light">
Footer
</footer>
</div>
And as you can see there, I have a problem with the text column. Is there any way that the column height stretch to the content, maintaining the current html structure? Thanks in advance for the answer.
On OS X scrollbars in the browser have native platform styling. I'd actually like to have this style also on other platforms. I know it's possible on Chrome to customize the look of the scrollbars. Is there any way I can achieve the "OS X look" using CSS on other platforms in Chrome?
since you are working on an app in a webkit based device it's worth taking a look at https://css-tricks.com/custom-scrollbars-in-webkit/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis magna eget efficitur viverra. Vestibulum feugiat felis maximus condimentum blandit. Etiam fringilla urna non libero malesuada pretium. Nulla facilisi. Nam finibus lacinia dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam eros a tellus rhoncus, sit amet efficitur est sollicitudin. Donec id felis nec sem tempus tempus. Vestibulum convallis elit non rutrum commodo.
Nullam viverra consequat est eu fringilla. Nunc ut turpis vulputate, scelerisque sem sed, mattis ligula. Nullam eu arcu ultrices, sagittis urna in, gravida velit. Nullam porta tempor mauris ac molestie. Nunc et orci interdum erat efficitur condimentum quis ut nulla. Donec accumsan tincidunt congue. Cras sollicitudin sit amet metus rhoncus convallis. Vestibulum scelerisque augue sit amet sapien varius venenatis. Sed non orci in dui varius tincidunt nec ac lectus. Suspendisse blandit, neque in efficitur posuere, augue risus aliquet sem, id sagittis turpis nisi non erat. Duis est lectus, egestas sit amet suscipit eu, ultricies non nisi. Phasellus dui lacus, iaculis eget condimentum vel, pulvinar placerat tortor. Etiam pellentesque leo nec egestas dictum.
Quisque euismod sodales est ac aliquet. Pellentesque porttitor mi aliquet cursus maximus. Nullam tincidunt non diam interdum laoreet. Aenean vel cursus odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque cursus, nibh quis semper tempor, felis justo dignissim turpis, eget accumsan leo nisl viverra sapien. Vestibulum quis vestibulum turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mauris ante, mollis eget iaculis ut, feugiat non dui. Nullam quis mi ornare, porta metus quis, accumsan augue. Curabitur accumsan tempus aliquam. Vestibulum elementum at lectus in auctor. Donec consectetur eleifend purus consectetur pellentesque.
Ut porttitor est at magna laoreet, sit amet vestibulum sem suscipit. Vivamus eget erat congue, tincidunt tellus et, elementum augue. Nulla sit amet est iaculis, elementum massa sit amet, bibendum enim. Duis mollis, velit et hendrerit dictum, ligula tortor laoreet dui, eget aliquet felis dolor sed massa. Suspendisse potenti. Fusce iaculis nisl non velit bibendum, quis placerat nisi interdum. Maecenas faucibus ligula non pulvinar laoreet. Fusce sagittis massa ut lorem facilisis, in ullamcorper velit tristique. Morbi a facilisis elit. Sed blandit nulla at scelerisque scelerisque.
Praesent rhoncus tincidunt diam quis auctor. Maecenas blandit commodo commodo. Pellentesque quis dolor id urna maximus tristique vitae id lectus. Phasellus convallis accumsan nibh ac ornare. Pellentesque hendrerit ex in rutrum ultrices. Aenean nisi eros, bibendum non metus ac, tincidunt hendrerit lorem. Cras feugiat, augue et auctor auctor, felis libero sagittis justo, ac pulvinar quam arcu eu dolor. Praesent lectus mauris, molestie in elit quis, scelerisque consectetur lectus. Phasellus ac scelerisque leo. Nullam eget interdum sapien. Suspendisse et urna sodales, venenatis augue ac, volutpat nisi. Mauris non fermentum nibh.
Proin nec augue et lectus congue pretium. Nullam orci nibh, sagittis vitae ex in, iaculis viverra erat. Praesent vitae lorem urna. Sed mi nibh, accumsan eget fringilla vitae, gravida non orci. Aenean justo massa, finibus non aliquet quis, fermentum et odio. Donec scelerisque est nunc, sit amet vulputate libero sodales a. Integer placerat felis eu enim porttitor tristique. Phasellus vestibulum tempus magna. Quisque commodo sodales dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nisi eget purus dapibus, quis pharetra magna bibendum. Sed id gravida lorem. Quisque dui quam, imperdiet id ultricies nec, ultrices non lacus. In blandit, sapien non laoreet volutpat, elit orci pharetra magna, in volutpat lacus elit nec metus. Ut eu vulputate sapien. Aliquam dictum, orci nec lacinia vestibulum, massa elit sollicitudin nisl, faucibus facilisis massa neque vestibulum eros.
Cras sed aliquam leo. Proin porttitor tincidunt enim, eget luctus justo. Aenean ultricies non urna quis interdum. In elit purus, ultrices et mollis sed, ullamcorper finibus ante. Vestibulum fringilla erat at orci ornare, eu vestibulum risus tincidunt. Proin a mauris quam. Ut dignissim ullamcorper volutpat. Sed tincidunt porta ornare. Donec sed ullamcorper mauris. Nulla mauris leo, egestas a eleifend ac, convallis a augue. Phasellus sollicitudin lorem ac sapien luctus finibus. Proin nec nisl dictum, consequat metus lacinia, pellentesque magna. Nam posuere hendrerit turpis, sit amet venenatis nisi congue sed. Suspendisse dui sem, placerat non felis sit amet, scelerisque cursus risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla cursus pharetra felis, a porta nunc convallis ac. Nullam laoreet lorem ultrices nisl gravida, at rutrum nisl condimentum. Curabitur ac faucibus dolor. Nullam hendrerit maximus mi, pulvinar venenatis ex tincidunt nec. Sed ullamcorper sit amet dolor eu venenatis. Ut sodales in orci sed tempor. Nullam nisl quam, convallis sit amet nulla id, vulputate sagittis est. Suspendisse egestas viverra quam, eget gravida massa luctus rhoncus. Nulla leo magna, commodo non maximus venenatis, ultricies eget mi. Quisque arcu magna, vehicula ac leo vel, gravida feugiat leo. Praesent at accumsan urna. Sed semper, nunc sed aliquam euismod, metus ex dignissim nisl, et dictum leo nibh quis dolor. Duis et purus quis augue aliquam lobortis ut eget ipsum.
Vestibulum pretium dignissim dolor, vel efficitur nisl vestibulum et. In aliquet ultricies eleifend. Donec tempor diam at pellentesque pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum imperdiet eu urna sit amet vestibulum. Ut sagittis odio nec sapien dapibus porttitor. Mauris lorem nibh, tempor non mi vel, vulputate fringilla libero. Sed varius massa eu metus elementum rhoncus. Phasellus vel interdum felis. Sed nec vulputate diam.
Integer tempus mattis aliquet. Nulla fermentum ex nec vestibulum bibendum. Aliquam in metus quis velit sollicitudin ornare quis et arcu. Fusce vitae ligula at libero pretium tincidunt. Praesent finibus metus nec posuere viverra. Nullam ac mattis mauris, ut vehicula enim. Proin efficitur fringilla mi sed maximus. Donec vel tempor nibh. Duis malesuada mauris et eros ultricies sollicitudin. Sed eget elementum libero. In vulputate lectus a ipsum eleifend, vel feugiat ex ornare.
</body>
</html>
Here is some code that I made a while back. You can take it and customize the scroll bar any way you want.
Try it in this jsfiddle: http://jsfiddle.net/wLD49/
HTML:
<div class="container">
<div class="scrollable">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis blandit lectus tempus aliquam. Aenean tempor libero odio, in gravida dui laoreet vitae. Duis porttitor, sem id convallis rhoncus, enim dolor volutpat nibh, vel sollicitudin arcu tortor eget elit. Vestibulum eu eros in ante rutrum porttitor. Quisque volutpat faucibus est, cursus suscipit nisi tincidunt sit amet. Proin leo odio, aliquam ac rutrum eget, rutrum quis dui. Nam tincidunt, diam at fringilla rhoncus, mi lacus faucibus sem, eu dapibus nunc felis ac nisl.
</div>
<div class="scrollbar"></div>
</div>
</div>
CSS:
.container {
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid blue;
position: relative;
}
.scrollable {
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
padding-right: 30px;
}
.content {
/* 10px for the scroll bar plus some extra spacing */
padding-right: 12px;
}
.scrollbar {
width: 8px;
height: 25px;
background-color: lightblue;
border-radius: 4px;
position: absolute;
right:0;
top: 0;
}
.scrollable:hover .scrollbar {
background: blue;
}
JavaScript:
var scrollables = document.getElementsByClassName('scrollable');
scrollables[0].addEventListener('scroll', scrolled);
function scrolled(e) {
var content = this.getElementsByClassName('content')[0];
var scrollingRange = content.offsetHeight - this.offsetHeight;
var scrollingRatio = this.scrollTop / scrollingRange;
var scrollbar = this.getElementsByClassName('scrollbar')[0];
var scrollbarRange = this.offsetHeight - scrollbar.offsetHeight;
scrollbar.style.top = String(scrollingRatio * scrollbarRange) + 'px';
console.log(scrollingRatio, scrollbarRange);
}