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>
Related
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>
Is is possible to write css rules to select and style all elements with non-empty class attributes?
Lets say I have 2 different paragraphs or headers with different classes. For example, h1 has a class of "id1" and h2 has a class of "id2".
How can I style them both?
Thank you.
you may use:
.id1, .id2{
//your css here
}
Or if you mean all elements which have a class attribute, then you may use:
*[class]{
//your css
}
But the above, also selects elements with an empty class such as:
<h1 class></h1>
or
<h1 class=""></h1>
to exclude such exceptions, you can modify the selector to:
*[class]:not([class=""])
You can use attribute selector like this:
[class] {
color: red;
}
<p class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quam praesentium alias recusandae tempora perspiciatis molestias accusamus ad in fuga, officiis id voluptate, quasi, rem inventore, illum sint voluptatem. Dolor.</p>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quam praesentium alias recusandae tempora perspiciatis molestias accusamus ad in fuga, officiis id voluptate, quasi, rem inventore, illum sint voluptatem. Dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quam praesentium alias recusandae tempora perspiciatis molestias accusamus ad in fuga, officiis id voluptate, quasi, rem inventore, illum sint voluptatem. Dolor.</p>
h1[class] {
color: blue;
}
<h1 class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quam praesentium alias recusandae tempora perspiciatis molestias accusamus ad in fuga, officiis id voluptate, quasi, rem inventore, illum sint voluptatem. Dolor.</p>
<h1 class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quam praesentium alias recusandae tempora perspiciatis molestias accusamus ad in fuga, officiis id voluptate, quasi, rem inventore, illum sint voluptatem. Dolor.</p>
<h2 class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quam praesentium alias recusandae tempora perspiciatis molestias accusamus ad in fuga, officiis id voluptate, quasi, rem inventore, illum sint voluptatem. Dolor.</p>
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.