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.
Related
I have container which separate its content by 2 columns. Is it possible to fill remain height in child section so next section could start with next column? Or some another approach with same result.
jsfiddle
.container {
height: 150px;
width: 300px;
background: #0ff;
margin-top: 10px;
overflow-x: scroll;
column-count: 2;
column-gap: 10px;
padding: 5px;
}
.section:nth-child(odd) {
background: rgb(91, 238, 116);
}
.section:nth-child(even) {
background: rgb(182, 182, 212);
}
<div class="container">
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
</div>
Simply add some margin. Make it the same as the height to make sure it will always work
.container {
height: 150px;
width: 300px;
background: #0ff;
margin-top: 10px;
overflow-x: scroll;
column-count: 2;
column-gap: 10px;
padding: 5px;
}
.section:nth-child(odd) {
background: rgb(91, 238, 116);
}
.section:nth-child(even) {
background: rgb(182, 182, 212);
}
.section:not(:last-child) {
margin-bottom:150px;
}
<div class="container">
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
<div class="section">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis minus, quia veritatis ullam et iure maxime quis quasi quisquam rerum quibusdam tempore quos vitae, quae magnam dignissimos eius voluptatem eligendi repellat voluptate incidunt suscipit earum harum a! Neque vitae amet quisquam, id cupiditate distinctio dolores,
</div>
</div>
It seems simple enough to centre a message vertically and horizontally using css flexbox but im struggling to use it to create a full page overlay. The flexbox always pushes other content. Maybe flex isn't the thing to use and i should stick to older css?
The overlay needs to be display: none; or hidden so that it can be shown at the appropriate time using javascript.
<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>
Im prepending this html to the body when its needed. I suppose this could be removed instead of hidden and then prepended again when needed.
body {
overflow:hidden;
padding:0;
margin:0;
}
#overlay {
background:magenta;
height:100vh;
width:100vw;
display:flex;
justify-content:center;
align-items:center;
}
#overlay-message {
color:#fff;
font-family:sans-serif;
font-size:40px;
}
<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>
Is that what you want?
or
body {
padding:0;
margin:0;
font-family:monospace;
font-size:24px;
}
p {
text-indent:40px;
}
#overlay {
background:magenta;
height:30vh;
width:30vw;
display:flex;
align-items:center;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#overlay-message {
color:#fff;
font-family:sans-serif;
font-size:16px;
text-align:center;
width:100%;
}
<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
I suppose that's what you want.
body {
padding:0;
margin:0;
font-family:monospace;
font-size:24px;
}
p {
text-indent:40px;
}
#overlay {
background:magenta;
height:30vh;
width:30vw;
display:flex;
align-items:center;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#overlay::before {
content:'';
position:fixed;
background:transparent;
height:100vh;
width:100vw;
left:-35vw;
}
#overlay-message {
color:#fff;
font-family:sans-serif;
font-size:16px;
text-align:center;
width:100%;
}
<div id="overlay"><span id="overlay-message">No Internet Connection</span></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos aliquam fugit illo voluptates harum ex porro officiis provident, odit quo sed error, assumenda maiores possimus architecto! Rem harum eos obcaecati.</p>
With a little javascript, it disappears when you click on it.
function hide () {
document.getElementById("overlay").style.display = "none";
}
document.getElementById("overlay").onclick = function() {hide()};
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'm experiencing a big problem with line height and block height which is a multiplicity of it. I have font-size of 15px, line height 1.5em (22.5px) and div height of: 16 lines * 1.5em = 24 em. It looks well in Firefox and MS Edge - div contains only 16 lines, as expected. But in Chrome actual text height becomes a bit smaller! And it shows also the parts of 17th line in blocks. Looks very weird.
Why does it happen and how to fix it with CSS?
.post-preview_main__content {
box-sizing: border-box;
font-size: 15px;
height: 24em;
line-height: 1.5em;
width: 420px;
overflow: hidden
}
p {
margin: 0;
padding: 0;
}
<div class="post-preview_main__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, necessitatibus, quidem in beatae quae quo perspiciatis nihil adipisci aut fuga ad possimus illo nisi vitae libero debitis accusantium magni esse. ipsum dolor sit amet, consectetur
adipisicing elit. Culpa, natus, deleniti tenetur quos hic voluptate itaque nobis</p>
<p>cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga
fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi
consectetur officia.</p>
<p> cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga
fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi
consectetur officia.</p>
<p>cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga
fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi
consectetur officia.</p>
<p>cum magni magnam ipsa enim a labore maxime repellendus eaque exercitationem nihil doloribus! ipsum dolor sit amet, consectetur adipisicing elit. Quidem, aliquam voluptate atque ipsa eveniet tempore sed cumque non magnam accusamus enim consectetur fuga
fugiat ducimus dolorum temporibus dolor facilis doloribus. ipsum dolor sit amet, consectetur adipisicing elit. Inventore, quisquam, vel dignissimos natus porro veniam velit quia odit quam dolorum reprehenderit vero eos modi non ea voluptate eligendi
consectetur officia.</p>
</div>
Firefox:
Chrome:
I figured out that the problem is in a fractional value of line-height - 22.5px (15px*1.5), WebKit doesn't handle this right, and this is its great disadvantage.
The problem is that even if I change line-height to give me integer px value, I can't keep it integer while font-size changes when user scales the page.
I have fixed position parent rotated with an overflow:hidden.
I want to have the child element in it able to scroll.
For some reason, even when I declare overflow: scroll on the child and height, the scrolling does does occur, just seems to get stuck.
Here is an example
HTML:
<div class="papa">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam debitis ea autem non earum quaerat delectus nostrum laborum dolores et hic omnis enim similique. Aspernatur ipsa laboriosam vel deserunt ut.
</div>
</div>
CSS:
.papa{
position: fixed;
top: 10px;
left: 0;
overflow: hidden;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
.child{
overflow: scroll;
height: 10%;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
You can set .papa{ height full window size 100% posible value set, try this way,
Check this jsFiddle
.papa{
height: 100%;
position: fixed;
top: 10px;
left: 0;
overflow: hidden;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
Found the solution, had to set height for parent element and it managed to work.
Here is the updated example if anyone will need it.