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.
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'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.
In my fiddle at the bottom of the page there will be a footer. If you click on the 'more info' link it hides the div and shows the other.
<div ng-app="myApp">
<div class="footer">
<div ng-if="!visible" class="footer-bar">
more info
</div>
<div ng-if="visible" class="footer-drawer">
hide info
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus eos ea impedit perferendis alias sit beatae
nulla, at, vitae debitis nesciunt, obcaecati laudantium iure
quo voluptatem in assumenda ad doloribus.
</p>
</div>
</div>
</div>
angular.module("myApp", [])
.directive("footer", [
function footer() {
return {
restrict: "C",
link: function($scope, element, attrs, ctrl) {
$scope.visible = false;
$scope.toggle = function toggle() {
$scope.visible = !$scope.visible;
}
}
};
}
]);
What I'm trying to get is a slidedown animation if you toggle the extra info. The page must also slide downwards so that the info is directly visible without scrolling down.
You need to use scrollTop() function .scrollTop() and then add watch to your visible value.
There is need to take your content div to your app div to easy access it from jQuery. Refer jsfiddle
angular.module("myApp", [])
.directive("footer", [
function footer() {
return {
restrict: "C",
link: function($scope, element, attrs, ctrl) {
$scope.visible = false;
$scope.$watchCollection('visible', function(newValue) {
if (newValue) {
$(element).parent().parent().scrollTop($(element).parent().parent()[0].scrollHeight);
}
});
$scope.toggle = function toggle() {
$scope.visible = !$scope.visible;
}
}
};
}
]);
Refer this question
This is work solution with animate and scroll.
Live example on jsfiddle.
angular.module("myApp", ['ngAnimate'])
.directive("footer", ["$timeout",
function footer($timeout) {
return {
restrict: "A",
link: function(scope, element, attrs, ctrl) {
scope.visible = false;
scope.toggle = function toggle() {
scope.visible = !scope.visible;
if (scope.visible)
$timeout(function() {
$(document.body).scrollTop($(document.body)[0].scrollHeight)
}, 100);
}
}
};
}
]);
.sample-show-hide {
padding: 10px;
border: 1px solid black;
background: white;
}
.sample-show-hide {
-webkit-transition: all linear 1.5s;
transition: all linear 1.5s;
}
.sample-show-hide.ng-hide {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<body ng-app="myApp">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, enim. Impedit vitae illo laudantium similique inventore cum, consequatur quae sit dignissimos tempora placeat minus sequi dicta unde ad doloribus cupiditate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam laborum praesentium non. Dignissimos odit illum hic distinctio libero, adipisci? Dolorum necessitatibus, labore natus similique quaerat tenetur odio quisquam voluptatem saepe.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente delectus itaque rerum exercitationem, pariatur deleniti iusto dolores beatae inventore! Officiis quis asperiores magnam impedit atque quae fugit iste blanditiis!</p>
</div>
<div>
<div footer>
<button ng-click="toggle()"><span ng-show="visible">hide info</span><span ng-show="!visible">more info</span></button>
<div ng-show="visible" class="sample-show-hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus eos ea impedit perferendis alias sit beatae nulla, at, vitae debitis nesciunt, obcaecati laudantium iure quo voluptatem in assumenda ad doloribus.
</p>
</div>
</div>
</div>
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
</label>
<div class="sample-show-hide" ng-show="checked" style="clear:both;">
Visible...
</div>
</div>
</body>
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>