Related
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
(3 answers)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 2 years ago.
It's clear what's happening is when the element of class 'sticky' becomes 10% from top of the viewport its position becomes fixed but stops becoming fixed when it reaches the bottom of the container its in.
My understanding is that elements that're fixed don't behave like this.
Is there any documentation that explains this?
<head>
<style>
.sticky {
position: sticky;
top: 10%;
}
</style>
</head>
<div style="height: 150px; margin-top: 100px;">
<div class="sticky" style="background-color: pink;">I am am sticky. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?.
</div>
</div>
<div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati ab,
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe!I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? ptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?. voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? ptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?.
</div>
The sticky div is sticky within its container. And the container is still scrollable. If you want it to be sticky according to the viewport you are not allowed to have non-fixed elements above it.
You would need to set position: fixed to the container for this to work as probably expected (and a margin to the content to ensure it's not hidden by the sticky div).
.sticky {
position: sticky;
top: 10%;
}
.wrapper {
position: fixed;
height: 150px;
margin-top: 100px;
}
<div class="wrapper">
<div class="sticky" style="background-color: pink;">I am am sticky. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus
itaque voluptate?.
</div>
</div>
<div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati ab, Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere
non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni
nostrum! Saepe!I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat
repellendus itaque voluptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi
nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem
ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? ptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit.
Officia, tempore? Debitis quasi eius doloribus asperiores recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam
maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit
doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?. voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae, vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio
reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium recusandae architecto voluptate corrupti? ptate?.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, tempore? Debitis quasi eius doloribus asperiores
recusandae voluptate numquam, sed aspernatur, soluta minus facere non iure voluptas tenetur magnam nisi nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit doloribus, iure aperiam maiores distinctio quod corporis eligendi repudiandae,
vitae repellat dolor error odit possimus natus! Earum autem magni nostrum! Saepe! I am an random Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit optio reprehenderit voluptate? Odit doloribus voluptates obcaecati ex voluptas, accusantium
recusandae architecto voluptate corrupti? Aut cumque aspernatur repellat repellendus itaque voluptate?.
</div>
I'm a total beginner and I'm trying to make my first website.
My problem is that when I scroll down the website and the navbar is "over" the video element, the navbar links stop functioning. I assume this may have something to do with the video element taking precedence over the sticky navbar links. However, if I replace the video element with a box or an image, the navbar links work even when the navbar is over the video. Could someone please try to explain where I'm missing something?
Thanks in advance!
body {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0.7rem;
background-color: white;
padding: 0.7rem;
border-radius: 5% 5% 5% 5%;
}
nav ul li {
display: inline;
}
nav ul li a {
color: gray;
text-decoration: none;
margin: 2rem;
}
.header-item {
margin-right: 5rem;
margin-left: 0rem;
font-size: 2.5rem;
font-weight: bold;
}
.banner {
padding-top: 2rem;
}
video.banner-video {
border-radius: 0.7rem;
object-fit: fill;
}
.jumbo {
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
}
a.anchor {
position: relative;
top: -8rem;
}
footer {
display: flex;
justify-content: center;
}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="main.css"/>
<head>
<title>Lorem ipsum dolor</title>
</head>
<body>
<nav>
<ul>
<li class="header-item" >Lorem Ipsum</li>
<li>
lorem
</li>
<li>
ipsum
</li>
<li>
dolor
</li>
</ul>
</nav>
<section class="banner">
<video class="banner-video" width="100%" height="320" loop muted autoplay>
<source src="https://player.vimeo.com/external/357105171.sd.mp4?s=58a7816e7bd115bb9c452293741c393a1acb61e8&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section class="jumbo">
<a class="anchor" id="header-1"></a>
<h2>lorem</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea invee iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-2"></a>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-3"></a>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
</section>
<footer>
<div>
<p>© 2020 cybele</p>
</div>
</footer>
</body>
</html>
Yes you are right, I forgot Firefox reads this properly almost always without z-index declared. Other including Chrome and Safari do not. You need z-index CSS property.
Just add z-index: 99; for example to your nav element so it will be allways on top of everything.
Also take note z-index does not work on elements that do not have position declared. . Read more about it here
body {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0.7rem;
background-color: white;
padding: 0.7rem;
border-radius: 5% 5% 5% 5%;
z-index: 99;
}
nav ul li {
display: inline;
}
nav ul li a {
color: gray;
text-decoration: none;
margin: 2rem;
}
.header-item {
margin-right: 5rem;
margin-left: 0rem;
font-size: 2.5rem;
font-weight: bold;
}
.banner {
padding-top: 2rem;
}
video.banner-video {
border-radius: 0.7rem;
object-fit: fill;
}
.jumbo {
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
}
a.anchor {
position: relative;
top: -8rem;
}
footer {
display: flex;
justify-content: center;
}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="main.css"/>
<head>
<title>Lorem ipsum dolor</title>
</head>
<body>
<nav>
<ul>
<li class="header-item" >Lorem Ipsum</li>
<li>
lorem
</li>
<li>
ipsum
</li>
<li>
dolor
</li>
</ul>
</nav>
<section class="banner">
<video class="banner-video" width="100%" height="320" loop muted autoplay>
<source src="https://player.vimeo.com/external/357105171.sd.mp4?s=58a7816e7bd115bb9c452293741c393a1acb61e8&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section class="jumbo">
<a class="anchor" id="header-1"></a>
<h2>lorem</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea invee iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-2"></a>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-3"></a>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
</section>
<footer>
<div>
<p>© 2020 cybele</p>
</div>
</footer>
</body>
</html>
You can do it by adding a position to your banner and a -1 z-index like this
.banner {
padding-top: 2rem;
z-index:-1;
position: relative;
}
Here's it working
body {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0.7rem;
background-color: white;
padding: 0.7rem;
border-radius: 5% 5% 5% 5%;
}
nav ul li {
display: inline;
}
nav ul li a {
color: gray;
text-decoration: none;
margin: 2rem;
}
.header-item {
margin-right: 5rem;
margin-left: 0rem;
font-size: 2.5rem;
font-weight: bold;
}
.banner {
padding-top: 2rem;
position: relative;
z-index: -1;
}
video.banner-video {
border-radius: 0.7rem;
object-fit: fill;
}
.jumbo {
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
}
a.anchor {
position: relative;
top: -8rem;
}
footer {
display: flex;
justify-content: center;
}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="main.css"/>
<head>
<title>Lorem ipsum dolor</title>
</head>
<body>
<nav>
<ul>
<li class="header-item" >Lorem Ipsum</li>
<li>
lorem
</li>
<li>
ipsum
</li>
<li>
dolor
</li>
</ul>
</nav>
<section class="banner">
<video class="banner-video" width="100%" height="320" loop muted autoplay>
<source src="https://player.vimeo.com/external/357105171.sd.mp4?s=58a7816e7bd115bb9c452293741c393a1acb61e8&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section class="jumbo">
<a class="anchor" id="header-1"></a>
<h2>lorem</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea invee iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-2"></a>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-3"></a>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
</section>
<footer>
<div>
<p>© 2020 cybele</p>
</div>
</footer>
</body>
</html>
I have two divs side by side, now I want the left container to define the height of the right one, so that the right one could be max the height of the left. So the right container should always have the height of the left one. Plus the right one has a fixed header and a scrollable content.
I also know that I can just give the right container position: absolute but I wonder if there is a more modern solution for this.
Is this what you're after? It's an example of what I'm saying in my comment
.container {
display: flex;
flex: 1;
align-items: stretch;
}
.left,
.right {
width: 50%;
padding: 20px;
color: white;
}
.left {
background: red;
}
.right {
background: blue;
}
<div class="container">
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime
fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam
architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi
impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati
voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio
animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
</p>
</div>
<div class="right">
<p>less content</p>
</div>
</div>
If this isn't right then please explain further as from what I can see this answers the points you've raised.
Edit
As per your comment, please check this code, this should give you the solution you need:
.container {
display: flex;
flex: 1;
align-items: stretch;
height: 100%;
}
.left,
.right {
width: 50%;
padding: 20px;
color: white;
display: flex;
}
.left {
background: red;
}
.right {
background: blue;
position: relative;
right: 0;
overflow: scroll;
position: relative;
}
.content {
height: 100%;
position: absolute;
}
<div class="container">
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
</p>
</div>
<div class="right">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
</p>
</div>
</div>
</div>
I want the following flex box layout to:
Have individual scrolling for the Sidebar and the Content area when the content in them overflows
Content area to appear next to the sidebar
Height of the main container to remain 100vh and neither the sidebar or the content area should exceed this.
The alert is for alerting users about issues. It should be on top and should occupy 100% of the width.
The user can choose to use the sidebar. If the sidebar is not used, content occupies 100% width. The alert will also only appear when something is wrong. If not then alert will not be shown
I am not sure why the content area appears below the sidebar and the sidebar and the content areas don't activate scrolling even after they overflow. You can see that the height of the sidebar exceeds the height of the main container (the background color of the main area is cyan).
.main {
display: flex;
flex-wrap: wrap;
height: 100vh;
background: cyan;
}
.main .alert {
flex: 1 1 100%;
background: yellow;
height: 30px;
order: -2;
}
.main .content {
flex: 1 1 auto;
background: blue;
overflow-y: auto;
}
.main .sidebar {
flex: 0 0 auto;
width: 200px;
background: red;
overflow-y: auto;
order: -1;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="content">
Content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto.
</div>
<div class="sidebar">
Sidebar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div>
Method #1: flex-direction:column and nested flex container
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
background: cyan;
}
.main .alert {
flex: 1 1 30px;
background: yellow;
}
.inner-flex-container {
display: flex;
}
.inner-flex-container .content {
flex: 1 1 auto;
background: blue;
overflow-y: auto;
}
.inner-flex-container .sidebar {
flex: 0 0 200px;
background: red;
overflow-y: auto;
order: -1;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="inner-flex-container">
<div class="content">
Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam
magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus
voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos
obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,
minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit,
tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis
magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure,
hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum
</div>
<div class="sidebar">
Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt
corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi
ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem
dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati
optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima
assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam,
officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div><!-- close .inner-flex-container -->
</div>
jsFiddle
Notes:
Added body { margin: 0; } to prevent overflow and vertical scrollbar when .main has height: 100vh.
Switched flex-direction of .main to column to establish vertical stacking.
Wrapped second and third flex items (.content and .sidebar, respectively) in their own flex container, which has flex-direction row so items are stacked horizontally below the first flex item (.alert).
Method #2: flex-wrap:wrap and calc()
body {
margin: 0;
}
.main {
display: flex;
flex-wrap: wrap;
max-height: 100vh;
background: cyan;
}
.alert {
flex: 1 1 100%;
background: yellow;
height: 30px;
}
.content {
flex-basis: 50%;
background: blue;
overflow-y: auto;
height: calc(100vh - 30px);
order: 1;
}
.sidebar {
flex-basis: 50%;
background: red;
height: calc(100vh - 30px);
overflow-y: auto;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="content">
Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni
quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus
voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos
obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,
minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur
libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem
optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto.
</div>
<div class="sidebar">
Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt
corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi
ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem
dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio
pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda
eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident
quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus
dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div>
jsFiddle
Notes:
No changes to HTML
calc used to subtract height of flex item one from height of flex items two and three, enabling them to wrap underneath in a 100vh container.
Edited to add the wrapper
.content{
flex: 1 1 auto;
background: blue;
overflow-y: auto; */
width: calc(100% - 200px); // Or use flex: 1 where you got flex: 1 1 auto;
overflow-y: auto;
}
.main .sidebar {
flex: 0 0 auto;
width: 200px;
background: red;
overflow-y: auto;
order: -1;
}
.wrapper{
display:flex;
flex-wrap:wrap;
}
On a kendo window I have two divs inside a main div container, the main content and a footer bar. I want to be able to scroll the main content panel while the footer does not scroll.
I have been playing with this for a little while using flex-grow and htmls own overscroll property but I cannot get one to move without the other. Any help would be appreciated :)
I can provide more info as required.
This represents the basic example of what I've done so far:
.container {
display: flex;
overflow: auto;
flex-flow: column wrap;
height: 100%;
width: 100%;
}
.main {
flex-grow: 1;
background: green;
}
.footer {
flex-grow: 0;
background: blue;
}
<div class="container">
<div class="main"><p> Main content </p> </div>
<div class="footer"> <p> Footer bar </p> </div>
</div>
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.Main {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
}
.Header {
height: auto; /* or height: Npx;, where N is a positive number */
background: #84dcc6;
overflow-y: hidden;
}
.Footer {
flex: 1;
background: #ffa69e;
overflow-y: auto;
}
<main class="Main">
<header class="Header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet.</header>
<footer class="Footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet.
</footer>
</main>