Related
I have an 8 columns grid, in which I want to distribute content, text and an image, as follows:
<div className="grid grid-cols-8 gap-4">
<div className="col-start-2 col-end-5">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad
tempora perferendis tenetur quia vitae blanditiis, excepturi quo
inventore. Molestias cum eaque natus sequi nisi ea, dolor atque
at? Fuga ipsa unde consectetur nobis consequatur tempore
asperiores, quos alias similique, rerum nemo illo qui quidem
accusantium molestiae voluptates deleniti praesentium sint?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
obcaecati accusamus quam eius doloremque. Error dignissimos modi
eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error
commodi amet repudiandae ut ab quos. Reiciendis officia placeat
harum nulla obcaecati magni accusantium dolorem architecto ullam,
ratione cumque distinctio consectetur esse deleniti.
</p>
</div>
<div className="col-start-6 col-end-8">
<img alt="dummy" src="https://via.placeholder.com/300x500" />
</div>
</div>
The code above produces this result on a 1200px screen:
And this one on an 800px screen:
How can I have the image responsive, and get its height adapt to the text content on the left, so the vertical side of the image always takes the height of the text regardless of screen-size?
Tailwind-play
If you can use flex this would be simplest of all in my opinion:
<div class="flex">
<div class="mr-8 w-8/12">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="w-4/12 bg-cover bg-center" style="background-image:url(https://via.placeholder.com/300x500)"></div>
</div>
tailwind play
Note: Width uses standard 2, 3, 4, 5, 6, 12 columns there is no 8 columns
The easiest(I think) would just be to set the second column to have a background image instead of an image inside, such as:
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis,
excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis
consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates
deleniti praesentium sint? </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error
dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab
quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque
distinctio consectetur esse deleniti. </p>
</div>
<div class="col-start-6 col-end-8 bg-center bg-cover" style="background-image:url(https://via.placeholder.com/300x500)"></div>
</div>
If you don't care about the aspect-ratio of the image then you can always use flex.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="flex col-start-6 col-end-8">
<img alt="dummy" className="" src="https://via.placeholder.com/300x500" />
</div>
</div>
Or if you do care about the aspect-ratio and don't care if the image gets cropped then you can set it as a background in the second div.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="flex col-start-6 col-end-8" style="background: url(https://via.placeholder.com/300x500)">
</div>
</div>
You can stretch the image to cover whole parent and then use object-fit to adjust clipping:
<img class="h-full w-full object-cover">
This will crop sides and show largest possible area, object-contain will show full image. No object-* or object-fill will deform it.
<script src="https://cdn.tailwindcss.com/"></script>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores,
quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia
placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.
</p>
</div>
<div class="relative col-start-6 col-end-8">
<img class="absolute h-full w-full object-cover" alt="dummy" src="https://via.placeholder.com/300x500" />
</div>
</div>
I have this problem that I am not sure is related to CSS grid. I want a layout with a fixed footer like this.
The problem that I am facing is that when the content on RIGHT or LEFT is bigger than their parents, the parent doesn't increase in height and I end with this. I would like to have both LEFT and RIGHT sections increase in height according to their contents so their respective background-colors are visible.
#app {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-areas: 'main' 'footer';
}
#app main {
grid-area: main;
overflow: auto;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-areas: 'left right';
background-color: red;
}
#app main .main-left {
grid-area: left;
background-color: #ff8127;
border-right: 1px solid #e5e5e5;
display: grid;
grid-template-columns: 1fr 70% 1fr;
grid-template-rows: 100%;
}
#app main .main-left .logo {
grid-area: 1 / 1 / 2 / 4;
max-width: 100%;
max-height: 90%;
width: fit-content;
align-self: center;
justify-self: center;
}
#app main .main-left .text-logo {
grid-area: 1 / 2 / 2 / 3;
display: grid;
text-align: center;
font-size: 19px;
font-weight: 600;
color: black;
grid-template-columns: 1fr;
grid-template-rows: 300px;
align-content: center;
align-items: center;
}
#app main .main-left .text-logo .text {
display: grid;
}
#app main .main-left .text-logo p {
margin: 1.5em 0;
}
#app main .main-right {
grid-area: right;
background-color: blue;
border-left: 1px solid #e5e5e5;
}
#app footer {
grid-area: footer;
padding: 13px;
font-size: 13px;
background-color: white;
border-top: 2px solid #e5e5e5;
}
#app footer p {
margin: 0;
padding: 0;
font-weight: 600;
text-align: center;
color: #5a5a5a;
}
<html>
<head>
<meta charset="UTF-8" />
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="app">
<main>
<section class="main-left">
<img class="logo" src="https://w7.pngwing.com/pngs/505/824/png-transparent-logo-drawing-lion-lion-illustration-vertebrate-flower-fictional-character.png" alt="logo" />
<div class="text-logo">
<div class="text">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime
porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto
aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe
illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem
distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis
mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi doloribus fugit sunt at iste, dignissimos quam voluptas adipisci illo rerum
maxime quis incidunt consequatur corporis velit maiores minima laboriosam. Iusto! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odit beatae veniam sed eveniet molestiae deleniti modi nostrum, obcaecati perferendis sapiente similique
totam voluptatem eos corporis minus libero, et cumque aperiam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ab enim inventore illum voluptas, quaerat possimus aliquid natus? Corporis cumque quas sit. Ullam distinctio doloribus
molestiae nihil reiciendis? Ut, sequi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis maxime porro, quibusdam iure provident esse nam, eius veritatis autem facilis officia dolorum iusto culpa eveniet corrupti facere deserunt
ipsam voluptate. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi reiciendis, architecto aperiam nisi minus necessitatibus doloribus ad aut vitae libero impedit quidem illo mollitia obcaecati repudiandae temporibus voluptate
quam! Nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cupiditate perferendis. Saepe illo quas ab quo veniam voluptas voluptatem ad architecto quia. Dolore quisquam molestias illo debitis voluptatum nesciunt repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum suscipit animi sunt natus quae hic dolorem distinctio, laboriosam itaque dolorum vitae nihil cum voluptatem dolores ea, delectus repudiandae ducimus non. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Fugiat quo iste nulla magni et. Accusantium ex, voluptatibus blanditiis mollitia architecto accusamus necessitatibus quisquam tempora enim, ea, sint laborum quos adipisci?
</p>
</div>
</div>
</section>
<section class="main-right">RIGHT</section>
</main>
<footer>
<p>© 2022 Company</p>
</footer>
</div>
</body>
</html>
I was able to debug your code, it seems that the grid-template-rows are affecting the content of your website.
Remove grid-template-rows on:
#app main
#app main .main-left .text-logo
because if you fix or specify some size in the row, your content will try to fit to that size, I don't use it when it comes to content creation sections.
No matter what I try, I can't get an image on my test web page get sticky on scroll. It's here: https://www.varamedia.be/website-laten-maken/restaurants/. I want the image of the laptop with the people in it to be sticky on scroll through the other content.
It's a Wordpress site and I also noticed something peculiar, namely the CSS that is not recognizing the sticky css, apparently. The error message is: "expected (static | relative | absolute | fixed) but found 'sticky'." Here is an image of it: https://www.varamedia.be/wp-content/uploads/2019/01/sticky.png
I really appreciate any kind of feedback on this. Thanks a lot for sharing your thoughts.
I read all articles I could get my hands on, tried all proposed solutions from the docs I could find online, but it does not work well for me. The image refuses to become sticky.
I tried using ID's, classes, played around with the overflow:hidden; etc But somehow I am missing something here. Though it feels as if I'm overlooking some detail because the position:sticky; CSS feature looks kind of straightforward but apparently isn't :/
.stickyimage{
position:sticky;
}
I'd welcome any advice based on an inspection of the given URL. Thanks a thousand times for your valuable input.
a 'top' or 'bottom' value must be added.
body {
margin:0;
}
p {
font-size:36px;
line-height:50px;
}
.nav {
width:100%;
background:orangered;
height:60px;
font-size:24px;
color:#fff;
text-align:center;
line-height:60px;
/*following codes is for sticky */
position:sticky;
top:0; /* it's up to you */
}
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates voluptatum cum optio a natus iste repellendus eaque at aut, voluptatibus sit veritatis quis quam magnam aspernatur, vero, sunt modi magni.</p>
<div class="nav">This a sticky nav</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p>
You have 2 issues.
Issue #1 - You must delcare either top, bottom, left or right on the element with position: sticky.
Issue #2 - Your parent element can not have overflow: hidden. Right now both the body tag and the html tag have the following...
overflow-x: hidden;
overflow-y: hidden;
Remove these...
You also need to make sure that the stickyclass is on the correct div, you want it on the outer div, in your example it should be on the following div.
I tested this and it works as expected.
When using css columns in Chrome (version 66 on mac), a bit of the content at the bottom of the previous column is cut off and shown at the top of the next column.
It only happens when line-height is set to a number lower than the default. It's the bottom parts (descender) of letters such as p and g.
It's hard to see with default browser fonts, but with some other fonts it becomes more visible and more of a problem.
Here's an image illustrating the problem:
.columns {
column-count: 2;
line-height: 1;
}
<div class="columns">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod optio magnam adipisci perspiciatis amet reiciendis? Velit harum nemo voluptatem sint saepe necessitatibus obcaecati vel eos in fugit hic ipsa accusamus assumenda qui illum, soluta consectetur
sequi iusto non consequatur doloremque repellendus optio alias. Ea quasi, temporibus architecto rem doloremque unde.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, quisquam id eum, earum vel fugit harum ad commodi tenetur tempore unde accusantium reprehenderit qui fuga sint libero dolorum hic dolore sit quaerat quasi ducimus nam laborum optio. Distinctio
magni beatae ipsum, corporis, sapiente porro quia quibusdam debitis libero at alias nihil eligendi.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis dolor quae obcaecati adipisci doloremque officiis debitis unde laudantium ipsum provident, odit excepturi quaerat aperiam dicta aliquid voluptas! Laboriosam, quia facere voluptatum beatae
enim cum ipsa nam, harum eligendi obcaecati optio nostrum architecto, minima quod ducimus consequatur ea voluptate soluta. Repellat.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque velit modi doloribus aut, ipsum assumenda autem ex vel deserunt odio enim nam quasi! Itaque totam ab dignissimos, perferendis sint est repellendus debitis animi sunt odit nesciunt soluta
deserunt labore quidem perspiciatis a culpa nemo exercitationem repudiandae, commodi maxime. Sapiente, perspiciatis ad?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto itaque deserunt in ipsa veniam minima et aliquam, veritatis laboriosam, qui exercitationem eos earum dolorum. Voluptatem maxime possimus architecto non id impedit rem eius
autem nulla illum ut ex doloremque deleniti suscipit nisi natus, culpa quis laboriosam. Repellat odio sit quaerat eligendi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aperiam repellat eligendi consequuntur temporibus, ipsum quidem animi officiis similique deleniti aut sapiente, blanditiis officia, exercitationem odio laboriosam cumque explicabo facere
voluptates. Facere nam accusamus maxime maiores voluptatum, est debitis error architecto nobis id ipsa? Nisi aspernatur itaque corrupti qui esse.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam, ratione consequatur laborum libero sapiente minus eaque nisi molestiae! Voluptate quas tenetur illum aut explicabo. Harum repudiandae, doloribus voluptatum consectetur numquam mollitia
placeat sed, assumenda repellat velit non maxime eos ipsum nam ratione. Amet tempora similique odit iusto, facere deserunt eius recusandae officiis impedit explicabo et?</p>
</div>
I have a issue with overflow: auto; on child element. When i hover .wrapper class for divs its ruin divs' position. Check this out:
How can I deal with that? It will be great if the divs element would stay at the same place before hovering.
[http://codepen.io/anon/pen/WQQLMJ?editors=110][1]
<div class="parent">
<span class="close"></span>
<div class="wrapper">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti consequatur ipsum at temporibus veritatis soluta perspiciatis quisquam fugiat odit quibusdam nihil sapiente vero, reiciendis adipisci non reprehenderit aut similique deleniti repellendus doloremque esse. Officia, quam ullam atque iusto lorem80 accusantium vitae cumque earum incidunt quos voluptatum maxime ut, sunt mollitia. Sit impedit porro sunt beatae quae at, cupiditate ut, ipsa placeat maiores! Doloremque perspiciatis saepe animi iste numquam, consectetur rerum tempora minima, placeat asperiores harum explicabo necessitatibus delectus dolorem sit quidem.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium esse ab nesciunt ipsa, vitae repellendus consectetur aperiam illum. Consequatur, dicta officiis adipisci minus, et tenetur assumenda repudiandae id, possimus, blanditiis mollitia repellendus. Nihil id doloribus culpa consectetur molestias voluptates iure blanditiis, at iusto cupiditate natus voluptatibus deleniti ab reprehenderit cumque eveniet soluta dolor officia incidunt recusandae, omnis. Quam facilis ducimus fugiat, nemo magni fuga, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae minima facilis, placeat, rerum quidem, possimus maxime accusantium beatae explicabo incidunt quasi rem atque tempora adipisci! Cumque sit ut iure suscipit. dolorum, perferendis tempore quod tenetur sequi aut eveniet. In, eius nam consequatur ipsam consequuntur fugiat a.</div>
</div>
</div>
If you add width it works.
.wrapper {
overflow: hidden;
height: 100%;
width:465px;
&:hover {
overflow: auto;
width:482px;
}