Related
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.
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()};
I am trying to implement parallax scrolling with only CSS3. I am following this guide. But it is not working.
Doing this kind of perspective projection without Javascript should lead to a much smoother and more efficient effect.
This is the code that I have written.
Below are my CSS and HTML.
.page {
height: 100vh;
width: 100%;
background-color: #aaa;
perspective: 1px;
overflow-x: hidden;
overflow-y: auto;
text-align: center;
}
.parallax {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.page h1 {
color: #fff;
transform: translateZ(0px);
}
.page p {
color: #fff;
transform: translateZ(-1px);
}
<section class="page">
<h1 class="parallax">Katalyst</h1>
<p class="parallax">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique
laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos
ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam
quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque
recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore
vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore
vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero!
</p>
</section>
<section class="page">
<h1 class="parallax">Katalyst</h1>
<p class="parallax">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique
laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos ut minus. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore
nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod
laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur,
ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum
totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore vitae, veniam dignissimos
ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor
sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam
quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque
recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quos laborum voluptates ab, temporibus accusantium nobis odio eos. Porro sed officiis aut enim placeat inventore
vitae, veniam dignissimos ut minus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore
vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. At inventore nesciunt neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. At inventore nesciunt
neque harum sed quod laboriosam quos consectetur, ducimus cumque recusandae rerum totam ut nobis maiores similique laudantium labore vero!
</p>
</section>
Interestingly, I find when I follow the example from the guide, it works without problem. Followup is below the code. Here is my code:
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
padding-left: 15px;
width: 400px;
}
.parallax__layer--back {
transform: translateZ(-2px) scale(3);
}
.parallax__layer--base p {
color: white;
font-family: "Arial", Helvetica, sans-serif;
}
.parallax__layer--base h1 {
color: white;
font-family: "Arial", Helvetica, sans-serif;
}
.parallax__layer--base h2 {
color: white;
font-family: "Arial", Helvetica, sans-serif;
}
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<img
style="height: 1500px"
src="https://upload.wikimedia.org/wikipedia/commons/7/73/Pale_Blue_Dot.png" />
</div>
<div class="parallax__layer parallax__layer--base">
<h1>Pale Blue Dot (exerpt)</h1>
<h2>by Carl Sagan</h2>
<p>Look again at that dot.</p>
<p>That's here.</p>
<p>That's home.</p>
<p>That's us.</p>
<p>
On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives.
</p>
<p>
The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple
in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there-on a mote of dust
suspended in a sunbeam.
</p>
<p>
The Earth is a very small stage in a vast cosmic arena.
</p>
<p>
Think of the endless cruelties visited by the inhabitants of one corner of this pixel on the scarcely distinguishable inhabitants of some other corner, how frequent their misunderstandings, how eager they are to kill one another, how fervent their hatreds.
</p>
<p>
Think of the rivers of blood spilled by all those generals and emperors so that, in glory and triumph, they could become the momentary masters of a fraction of a dot.
</p>
<p>
Our posturings, our imagined self-importance, the delusion that we have some privileged position in the Universe, are challenged by this point of pale light.
</p>
<p>
Our planet is a lonely speck in the great enveloping cosmic dark.
</p>
<p>
In our obscurity, in all this vastness, there is no hint that help will come from elsewhere to save us from ourselves.
</p>
<p>
The Earth is the only world known so far to harbor life.
</p>
<p>
There is nowhere else, at least in the near future, to which our species could migrate.
</p>
<p>
Visit, yes.
</p>
<p>
Settle, not yet.
</p>
<p>
Like it or not, for the moment the Earth is where we make our stand.
</p>
<p>
It has been said that astronomy is a humbling and character-building experience.
</p>
<p>
There is perhaps no better demonstration of the folly of human conceits than this distant image of our tiny world.
</p>
<p>
To me, it underscores our responsibility to deal more kindly with one another, and to preserve and cherish the pale blue dot, the only home we've ever known.
</p>
</div>
</div>
The reason yours does not work is that you basically aren't following the layout he gives at all. Here is the layout you need:
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
...
</div>
<div class="parallax__layer parallax__layer--base">
...
</div>
</div>
Note that there are two ... areas. The first is the stuff you want to be in the background. The second is the stuff you want to be in the foreground.
Simply use his CSS, and keep this structure for your html, and it will work.
I want the Content Header to be fixed so the content scrolls underneath. This is a classic holy grail layout using flexbox with scrollable content area.
I have tried setting the Content Header to fixed position and adding padding this works sort of but then it does not take up the full width of the content area.
html, body {
height: 100%;
min-height: 100%;
overflow: hidden;
}
.holy-grail {
display: flex;
height: 100%;
flex-direction: column;
width: 80%;
margin: 0 auto;
}
.holy-grail-body {
display: flex;
flex: 1;
}
.holy-grail-content {
flex: 1;
background: #ffc94e;
overflow: auto;
}
.holy-grail-content-header {
background: lightyellow;
height: 50px;
}
.holy-grail-nav, .holy-grail-sidebar {
/* 12em is the width of the columns */
flex: 0 0 12em;
background: #c9ea5d;
}
.holy-grail-nav {
/* put the nav on the left */
order: -1;
background: #85d6e4;
}
header {
background: #92e4c9;
}
footer {
background: #f7846a;
}
* {
color: #333;
}
<!doctype html>
<html lang="en">
<head>
<title>A Holy Grail Flexbox layout</title>
</head>
<body class="holy-grail">
<header>
<h1>Header</h1>
</header>
<div class="holy-grail-body">
<main class="holy-grail-content">
<header class="holy-grail-content-header">Content Header</header>
TEST
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
</main>
<nav class="holy-grail-nav">
<h2>Navigation</h2>
</nav>
<aside class="holy-grail-sidebar">
<h2>Sidebar</h2>
</aside>
</div>
<footer>
<h2>Footer</h2>
</footer>
</body>
</html>
I figured it out, maybe there is a better solution, comments are welcome, but this seems to work. I basically made another flexbox column for the content then added a header, this works the same way as the outer flexbox column header, content, footer.
Below is the completed code
html, body {
box-sizing: border-box;
height: 100vh;
overflow: hidden;
}
*, *:before, *:after {
box-sizing: inherit;
}
.holy-grail {
display: flex;
flex-direction: column;
}
.holy-grail-body {
flex: 1;
display: flex;
flex-direction: row;
}
.holy-grail-content {
flex: 1 1 auto;
background: #ffc94e;
display: flex;
flex-direction: column;
order: 2;
}
.holy-grail-content-header {
background: lightyellow;
flex: 0 0 50px;
}
.content {
flex: 1;
overflow:auto;
}
.holy-grail-nav, .holy-grail-sidebar {
/* 12em is the width of the columns */
flex: 0 0 10em;
background: #c9ea5d;
}
.holy-grail-nav {
/* put the nav on the left */
order: 1;
background: #85d6e4;
}
.holy-grail-sidebar {
order: 3;
}
header {
background: #92e4c9;
height: 50px;
}
footer {
background: #f7846a;
height: 50px;
}
* {
color: #333;
}
<!doctype html>
<html lang="en">
<head>
<title>A Holy Grail Flexbox layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="holy-grail">
<header>
<h1>Header</h1>
</header>
<div class="holy-grail-body">
<main class="holy-grail-content">
<header class="holy-grail-content-header">Content Header</header>
<div class="content">TEST
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione reprehenderit ullam.
TestEnd
</div>
</main>
<nav class="holy-grail-nav">
<h2>Navigation</h2>
</nav>
<aside class="holy-grail-sidebar">
<h2>Sidebar</h2>
</aside>
</div>
<footer>
<h2>Footer</h2>
</footer>
</body>
</html>
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.