position: sticky is not working in my code
I have tried different properties but nothing seems to work
codepen: https://codepen.io/iabzeet/pen/qBmGyLb
help me solve this problem
#title{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
position: relative;
top: 24px;
display: flex;
flex-direction: row;
}
.logo{
width: 4%;
position: relative;
top: 20px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -6px 0px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg,blue,white,yellow);
}
body{
box-sizing: border-box;
}
#header-img{
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
nav {
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover{
margin: 0.5px -10px 0px -10px;
position: fixed;
top: 0px;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml{
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text{
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 2;
font-size: 50px;
}
.policies{
margin-top: 0px;
background-image: whitesmoke;
display: flex;
position: relative;
}
#prod{
background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
margin-right: -7px;
margin-left: -7px;
position: absolute;
top: 390px;
font-size: large;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<!DOCTYPE html>
<html>
<body>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio asperiores quod tempore? Possimus numquam mollitia nemo amet quod ut facere maxime facilis cupiditate optio, cum quisquam culpa accusantium harum dicta iste autem. Illo provident minima dolorum excepturi culpa perferendis laboriosam, fugiat reprehenderit magnam adipisci. Minus cumque magni harum! Minus earum aliquam porro explicabo fugiat fuga ipsa aut hic autem rerum ad provident corrupti, repellendus quam assumenda repudiandae? Quos inventore nam aliquam fugit totam modi fugiat asperiores cumque cum reprehenderit. Laborum iusto culpa facere velit inventore aperiam quia nisi, amet dolorem autem possimus explicabo enim vel dolore. Aut iusto amet consequatur saepe velit aliquam nihil nisi, quo iure veniam doloribus ducimus! Adipisci quisquam alias nisi eveniet! Repudiandae officia perspiciatis, neque accusantium cum suscipit fuga alias explicabo, corporis facere voluptatem assumenda fugiat incidunt dignissimos dicta ex tenetur magni sint ipsam ipsum. Provident suscipit quod asperiores labore esse sapiente nesciunt, iusto blanditiis aut distinctio sint rerum optio. Distinctio aspernatur eum natus assumenda! Molestias omnis fuga natus vitae eius ea, eligendi odit magni laboriosam id quis reprehenderit aspernatur expedita sunt. Ex praesentium facilis at, hic minus voluptatem laborum eaque, voluptatum ipsa incidunt tempora. Tempora vel dignissimos aspernatur rerum optio officia excepturi delectus, commodi ex itaque ab velit eaque pariatur sapiente placeat reprehenderit earum ipsum necessitatibus ullam! Hic maxime assumenda provident praesentium animi corrupti laboriosam dolores explicabo voluptas iure, quasi error dolore doloremque voluptatem molestias et accusamus officia id reprehenderit repellat quia ipsam, quo repudiandae. At, repudiandae aut! Itaque rerum natus nulla aperiam veniam et fugit ipsa, at reiciendis eos consectetur unde officia, impedit earum facere placeat nemo praesentium quos deserunt temporibus, nesciunt doloribus culpa ad? Eius repellat vel fugit, labore reprehenderit nesciunt tenetur maxime debitis tempore veniam, non et quibusdam deleniti laborum explicabo! Architecto quo perferendis doloribus ut magnam inventore alias temporibus voluptatem qui ratione neque itaque ex est atque, debitis quod voluptates error dolorum sapiente excepturi magni. Quis modi molestiae laborum magni odio maxime laudantium id sed labore enim facere est veritatis distinctio, quos asperiores minus delectus ratione earum ipsum a quo? Atque aliquid molestiae repellat veritatis corporis optio voluptas, sunt impedit eum nobis laboriosam expedita magni sed doloribus consectetur, quos ratione maxime saepe! Sapiente ea eligendi libero alias laborum voluptatem repellat consequuntur mollitia perspiciatis non dolorum, quas et repellendus. Repellat, doloribus alias quas rerum eveniet quo velit ullam dolorem quidem nesciunt ipsum cum exercitationem magni numquam provident neque nemo odio perferendis, sapiente ipsam sunt.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae! Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse, dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis, magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid, porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate? Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci a similique?</h5>
</section>
</body>
</html>
Reference: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
Working Demo: https://codepen.io/shalinimandal/pen/dyWEgpg
Add the following CSS in your code:
nav {
z-index: 10;
}
.sticky {
position: fixed;
top: 50px;
width: 100%;
}
Add this Javascript code to add sticky class on scroll
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("nav-bar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
You can try to remove position: fixed from #cover and position: absolute from #prod
#title{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
position: relative;
top: 24px;
display: flex;
flex-direction: row;
}
.logo{
width: 4%;
position: relative;
top: 20px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -6px 0px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg,blue,white,yellow);
}
body{
box-sizing: border-box;
}
body, header, .container {
display:initial;
}
#header-img{
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
nav {
position: sticky;
top: 0;
position: -webkit-sticky;
z-index: 10;
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover{
margin: 0.5px -10px 0px -10px;
/*position: fixed;*/
top: 0px;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml{
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text{
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 2;
font-size: 50px;
}
.policies{
margin-top: 0px;
background-image: whitesmoke;
display: flex;
position: relative;
}
#prod{
background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
margin-right: -7px;
margin-left: -7px;
/*position: absolute;*/
top: 390px;
font-size: large;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<body>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio
</h5>
</section>
</body>
I think position: sticky doesn't work the way you think it does. The element with the position: sticky will only be "stuck" as long as its parent is visible. In your case nav parent is header and header has roughly the same height than nav.
In other words if you want an element to stick it needs to be the child of the element you're scrolling into.
The problem in your case is that so many elements are positioned with absolute or fixed at the end your body has the same height as the header wich means no overflow and no "stickiness"
My advise would be to start over if possible, avoid position: absolute or position: fixed for the layout (I usually recommend display: grid but when I see the final result display: block should do) and apply position: sticky to the header
As I said in comment of your question:
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. Source Mozilla
It does solve entirely your problem:
First I took out the nav from the header to make the position:sticky work because it wont work if it is not directly under body in this case.
Second I just commented your position:fixed on your #cover to show where that it can work otherwise it will always cancel your sticky as per documentation
Third I added z-index:1000; /* ADDED */ on your nav
Fourth comment postion on .policies and #prod
Now you just need to align correctly your video, as it seems to have a lot of different margin for no reason
DEMO:
#title{
font-family: 'Inknut Antiqua', sans-serif;
color: rgb(243, 30, 112);
font-size: 12px;
position: relative;
top: 24px;
display: flex;
flex-direction: row;
}
.logo{
width: 4%;
position: relative;
top: 20px;
display: flex;
flex-direction: row;
}
.top-container {
padding: 60px 30px 30px 30px;
margin: -80px -6px 0px -30px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
position: relative;
background-image: linear-gradient(-45deg,blue,white,yellow);
}
body{
box-sizing: border-box;
}
#header-img{
width: 3%;
padding: 0;
display: flex;
position: relative;
top: 2px;
}
nav {
position: sticky;
top: 0;
z-index:1000; /* ADDED */
}
ul {
list-style-type: none;
margin: 0;
padding: 20%;
background-color: #333;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
li {
list-style: none;
margin-right: 70px;
font-size: 25px;
font-weight: bold;
}
li a {
display: block;
color: white;
text-align: center;
padding: 3px 10px;
text-decoration: none;
}
li a:hover {
background-color: #04AA6D;
border-radius: 5px;
}
ul {
list-style-type: none;
margin: -48px -6px 0px -10px;
padding: 9px;
display: flex;
flex-direction: row;
}
#cover{
margin: 0.5px -10px 0px -10px;
/*position: fixed;*/
top: 0px;
display: grid;
width: 100%;
margin-right: -98px;
height: 550px;
object-fit: cover;
align-self: center;
z-index: -1;
opacity: 0.8;
}
.container {
height: 100%;
padding: 0.01em 16px;
padding-top: 0.01em;
padding-right: 0px;
padding-bottom: 0.01em;
padding-left: 0px;
display: grid;
position: relative;
justify-items: center;
}
#sml{
position: absolute;
display: grid;
color: white;
transform: translate(0px, 150px);
}
#text{
position: absolute;
display: grid;
color: whitesmoke;
transform: translate(0px, 150px);
z-index: 2;
font-size: 50px;
}
.policies{
margin-top: 0px;
background-image: whitesmoke;
display: flex;
/*position: relative;*/
}
#prod{
background-image: url("https://images.unsplash.com/photo-1524230572899-a752b3835840?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1952&q=80");
margin-right: -7px;
margin-left: -7px;
/*position: absolute;*/
top: 390px;
font-size: large;
}
/* .centered{
position: absolute;
color: rgb(228, 56, 56);
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
} */
<!DOCTYPE html>
<html>
<body>
<head>
<title>Giovanni's Guitars</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght#300&display=swap"
type='text/css'>
</head>
<div class="top-container">
<img class="logo" src="logo1.svg" alt="a logo">
<div id="title">
<h1>Giovanni's Guitars</h1>
</div>
</div>
<header id="header">
<img id="header-img" src="logo2.svg" alt="a logo">
</header>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
<div class="container">
<video autoplay muted loop id="cover">
<source src="https://cdn.videvo.net/videvo_files/video/free/2021-05/small_watermarked/210512_01_Music_4k_009_preview.webm" type="video/mp4">
</video>
<p id="sml">Since 1961</p>
<div id="text">
<h4>Guitars and Basses.</h4>
</div>
</div>
<section class="policies">
<h5 id="prod">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sint fugiat placeat mollitia necessitatibus enim quae at illo rem! Fuga tempore dicta ut repudiandae quis quaerat facere sit odit! Fugiat perspiciatis, accusamus voluptate itaque incidunt reprehenderit perferendis nemo. Consequuntur vero ipsum modi excepturi facilis id nemo, porro animi beatae est recusandae officia, repudiandae velit necessitatibus possimus nam maiores quo corporis laboriosam obcaecati repellat sit! Explicabo eveniet fugiat iste, minima facere ipsum aliquam fuga dignissimos amet aperiam atque excepturi, adipisci distinctio minus laudantium. Provident obcaecati tenetur rerum! Eveniet quo, nulla debitis, reiciendis hic fugiat perferendis vel consequatur eligendi amet assumenda totam? Ullam ipsa illum fugit, dolor est hic ex sequi laudantium odio consectetur vitae nihil unde, quibusdam necessitatibus. Quae placeat dolorum eos suscipit! Quo necessitatibus in ab delectus doloremque et ipsum dolorem, quod, accusantium voluptas, obcaecati possimus. Dolores dolor accusamus ex aspernatur! Porro quo laboriosam est blanditiis incidunt, quis accusantium necessitatibus distinctio dolorem enim ipsam accusamus ut odit officia rerum, praesentium ab voluptas fuga explicabo fugit dolorum ea cum animi in? Iusto veniam corporis doloremque, necessitatibus ipsam dolore! Quam sequi reprehenderit ex fugiat soluta facilis illum laudantium omnis assumenda quisquam, incidunt, deserunt officia nostrum perspiciatis. Labore veniam reiciendis quia eos veritatis sequi velit numquam unde molestias, adipisci, eligendi quisquam, quae quo modi porro harum commodi consequatur aliquid nobis. Natus quidem voluptate ratione fugiat, dolores quo culpa fuga fugit. Aperiam dolore, velit ullam repellat unde delectus eos aliquid, asperiores itaque impedit in sapiente, quasi facilis. Libero iusto cumque esse rerum quis, suscipit voluptatibus nihil soluta facere magni, nesciunt praesentium dolore consectetur et sapiente corrupti reprehenderit fuga facilis animi odio asperiores quod tempore? Possimus numquam mollitia nemo amet quod ut facere maxime facilis cupiditate optio, cum quisquam culpa accusantium harum dicta iste autem. Illo provident minima dolorum excepturi culpa perferendis laboriosam, fugiat reprehenderit magnam adipisci. Minus cumque magni harum! Minus earum aliquam porro explicabo fugiat fuga ipsa aut hic autem rerum ad provident corrupti, repellendus quam assumenda repudiandae? Quos inventore nam aliquam fugit totam modi fugiat asperiores cumque cum reprehenderit. Laborum iusto culpa facere velit inventore aperiam quia nisi, amet dolorem autem possimus explicabo enim vel dolore. Aut iusto amet consequatur saepe velit aliquam nihil nisi, quo iure veniam doloribus ducimus! Adipisci quisquam alias nisi eveniet! Repudiandae officia perspiciatis, neque accusantium cum suscipit fuga alias explicabo, corporis facere voluptatem assumenda fugiat incidunt dignissimos dicta ex tenetur magni sint ipsam ipsum. Provident suscipit quod asperiores labore esse sapiente nesciunt, iusto blanditiis aut distinctio sint rerum optio. Distinctio aspernatur eum natus assumenda! Molestias omnis fuga natus vitae eius ea, eligendi odit magni laboriosam id quis reprehenderit aspernatur expedita sunt. Ex praesentium facilis at, hic minus voluptatem laborum eaque, voluptatum ipsa incidunt tempora. Tempora vel dignissimos aspernatur rerum optio officia excepturi delectus, commodi ex itaque ab velit eaque pariatur sapiente placeat reprehenderit earum ipsum necessitatibus ullam! Hic maxime assumenda provident praesentium animi corrupti laboriosam dolores explicabo voluptas iure, quasi error dolore doloremque voluptatem molestias et accusamus officia id reprehenderit repellat quia ipsam, quo repudiandae. At, repudiandae aut! Itaque rerum natus nulla aperiam veniam et fugit ipsa, at reiciendis eos consectetur unde officia, impedit earum facere placeat nemo praesentium quos deserunt temporibus, nesciunt doloribus culpa ad? Eius repellat vel fugit, labore reprehenderit nesciunt tenetur maxime debitis tempore veniam, non et quibusdam deleniti laborum explicabo! Architecto quo perferendis doloribus ut magnam inventore alias temporibus voluptatem qui ratione neque itaque ex est atque, debitis quod voluptates error dolorum sapiente excepturi magni. Quis modi molestiae laborum magni odio maxime laudantium id sed labore enim facere est veritatis distinctio, quos asperiores minus delectus ratione earum ipsum a quo? Atque aliquid molestiae repellat veritatis corporis optio voluptas, sunt impedit eum nobis laboriosam expedita magni sed doloribus consectetur, quos ratione maxime saepe! Sapiente ea eligendi libero alias laborum voluptatem repellat consequuntur mollitia perspiciatis non dolorum, quas et repellendus. Repellat, doloribus alias quas rerum eveniet quo velit ullam dolorem quidem nesciunt ipsum cum exercitationem magni numquam provident neque nemo odio perferendis, sapiente ipsam sunt.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, minima. Dolore quod quam similique, odio facere necessitatibus quas officia libero non eveniet sit ipsum consectetur sunt distinctio omnis dolor, doloremque quaerat, labore quia fugiat porro facilis inventore! Nulla magnam labore assumenda laboriosam incidunt nisi dignissimos maxime repudiandae, maiores ipsa quod eligendi, at nesciunt quos. Commodi vitae blanditiis ratione assumenda. Voluptatem placeat provident illum officia fugit sequi vero nisi quam. Ipsum rerum eius ratione ea asperiores possimus praesentium commodi fuga, minima eum laudantium suscipit nostrum eveniet perferendis deserunt laboriosam blanditiis neque, alias, voluptatem eligendi dolorum vitae quae! Aut amet aliquid libero pariatur, blanditiis harum atque. Necessitatibus, iure? Odio quae magnam aliquid incidunt officia error perspiciatis illum voluptatum hic? Quas alias nemo accusantium temporibus error? Provident fuga fugiat eius enim totam soluta saepe beatae accusantium asperiores sunt nesciunt ipsa, eaque dolorum et perspiciatis dignissimos sequi? Adipisci dolorem doloremque facere pariatur inventore fuga cupiditate vel quidem enim a quia, ab odio, eveniet dignissimos dolores aliquid tenetur autem, quis nam quibusdam. Vel, quam excepturi. Fugit maxime voluptatum nam maiores delectus, quo illo consequatur aliquid dolorem excepturi quia sit laudantium quam deserunt numquam adipisci voluptatem eveniet voluptates, sed veniam rem reprehenderit corporis? Blanditiis quod, aut consequuntur commodi nisi, cupiditate dolor nihil aperiam deserunt quaerat molestiae quis nesciunt, laborum unde incidunt culpa! Possimus commodi impedit ullam eius aut veritatis expedita voluptatum nam deserunt ipsa, eum consequatur iusto doloribus enim voluptas labore ut nobis obcaecati illo perspiciatis quam similique provident. Culpa, quos sint eveniet eaque sequi doloremque mollitia nesciunt alias maiores debitis natus soluta. Explicabo dolorum ipsum dolores quaerat doloribus ad commodi nulla cupiditate doloremque. Quas iusto velit pariatur voluptatibus labore? Assumenda, cumque! Dicta molestias, harum officiis aperiam velit temporibus optio obcaecati nemo sint quam debitis nostrum. Esse, dolor. Excepturi provident ea ab, quas fugiat, dolores magni sapiente ipsum, accusantium commodi ex itaque enim! Beatae odio ipsa quisquam enim eius expedita obcaecati doloribus libero illum minima dolor asperiores accusantium, saepe suscipit facilis consequatur laboriosam, optio nemo cupiditate commodi necessitatibus aperiam. Enim perferendis ullam cum beatae soluta quas aspernatur labore itaque veniam delectus dolor debitis, voluptatibus veritatis deserunt nihil blanditiis velit ex obcaecati necessitatibus officiis minima omnis odit. Explicabo est consequuntur, ea nemo asperiores placeat nisi cum fugiat reiciendis repudiandae unde ipsum, distinctio nesciunt eos eligendi. Quo provident atque aperiam nemo numquam quaerat aliquid! Quibusdam culpa obcaecati quaerat excepturi veniam! Ut aliquam dolorum vitae praesentium reprehenderit? Unde hic consequatur officia, amet doloremque expedita! Voluptas accusamus animi ipsum quisquam atque et, ducimus est sequi quos quibusdam, nulla omnis, magnam debitis molestiae sit eius soluta impedit iusto esse voluptatem minus fugiat dolor provident? Adipisci ipsam eos, id ad accusamus voluptates accusantium maiores quas quos nobis, optio culpa assumenda similique voluptatum rem dolorum veniam doloremque ducimus quasi sit. Quos blanditiis natus in nisi sint illo unde inventore repudiandae, beatae eius ut vero ex at veritatis dolor itaque obcaecati adipisci. Itaque beatae omnis tempora et eos debitis, amet incidunt consequuntur aut aliquid, porro distinctio expedita repellat tempore. Similique iste dolores excepturi esse laborum ad, asperiores voluptate. Cum harum aliquid alias qui perferendis magnam maiores eligendi expedita et sapiente quibusdam animi unde minus, mollitia nihil repellat delectus cupiditate, architecto eveniet! Modi iusto vero molestiae laudantium, corporis optio a vel perspiciatis quisquam alias maiores ratione, ea ipsam id quam dolorem quis consequuntur. Excepturi at explicabo doloremque asperiores cupiditate? Cum sunt dolorem similique eveniet eligendi, obcaecati nesciunt vel perspiciatis delectus magnam, illum doloribus aut amet ipsam veritatis laboriosam quidem alias illo saepe rerum! Et dicta quo tempore eos dolore? Iste hic recusandae, blanditiis cumque veniam quas architecto. Repudiandae aliquam necessitatibus magni rerum quisquam eum atque dolorum placeat dignissimos. A qui cumque voluptates sint optio voluptatibus vitae harum tenetur reiciendis id eos quidem tempore laborum in error obcaecati odit ex et ratione, eaque assumenda aut eius! Impedit, quis. Nulla inventore neque omnis qui eveniet molestias eius sint vel voluptas! Tempora, animi? Sequi veniam iure quibusdam repellat, dolorum, id earum accusamus reiciendis at possimus adipisci a similique?</h5>
</section>
</body>
</html>
I tested a bit and I think the problem is not with the position sticky but with where your nav is located in the html.
if you move it outside the header you will see that it already sticks a little. The problem is that it can only stick to the top of its container as long as it doesn't touch the bottom of the container. So the height of the container should be bigger for you nav to be able to move.
Could you add some more detail on how you want the desired design to behave.
Do you wish to have the navbar stop when it hits to the top of the page? If so you will likely require some JavaScript. In which case, this may be what you are looking for...
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
If you simply wish for the navbar to stay where it is whilst the rest of the page moves behind it, then try this...
nav {
position: fixed;
}
Related
This question already has answers here:
Keep background image fixed during scroll using css
(3 answers)
Closed 6 months ago.
I am trying to make a page with a glass morphism effect. I don't want to move a background of the body. I want to move only .container. Is this possible? I already tried background-attachment: fixed but it is not working.
Here the code that I'm using:
body {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
background: #091921;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background: linear-gradient(#e91e63, #ffc107);
clip-path: circle(22% at 30% 20%);
z-index: -1;
}
body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background: linear-gradient(#ffffff, #da00ff);
clip-path: circle(20% at 70% 90%);
z-index: -1;
}
.container {
margin: 50px 0;
width: 60%;
padding: 20px 40px;
background-color: rgba(255, 355, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis vero placeat dicta reprehenderit quam soluta, nisi suscipit molestias voluptatibus itaque autem similique, quo ullam sint. Mollitia magnam quos rem veniam sit, nulla repellat
ab saepe fugit, numquam necessitatibus vel qui consequatur unde autem cum repellendus dolorum harum veritatis dolor et natus perferendis dolore culpa. Nostrum veritatis accusamus molestias porro sint veniam officia! Harum eaque corporis aperiam
nobis ea vitae animi consectetur libero sed nisi repellendus voluptatum illum voluptate veniam quisquam ullam, assumenda rerum tempora et ducimus, quod nam officia. Velit, dolores molestiae error laudantium minus consectetur natus vero ducimus esse
voluptatibus delectus nam dolore tempore expedita ad pariatur repellendus rerum fugiat recusandae unde iste omnis repellat. Vero eos ex dolorum explicabo eum placeat rem, unde nobis id veritatis molestias harum beatae enim, obcaecati sed, provident
iusto error minus quis? Tenetur aliquid ipsa illo tempora odio ab. Doloremque laudantium, officia accusantium non autem blanditiis incidunt alias. Debitis at ullam esse nihil! Est, hic quasi! Voluptas rem mollitia dolorum accusamus ipsa non ipsam
odit quis debitis quasi aliquid tempore vel totam porro possimus ullam inventore sunt, in accusantium, maiores natus. Magnam, aut quaerat alias beatae commodi eum autem repellat accusamus esse in corrupti amet maiores dolorem maxime exercitationem
omnis totam natus adipisci suscipit. Rerum maiores, nobis eligendi repudiandae doloremque mollitia deserunt praesentium expedita, odio fugiat quae quas. Laboriosam eaque rem praesentium quam vero fugit debitis, odio sed ad. Doloribus quod saepe
nisi earum sapiente tempore expedita modi perspiciatis cum aut vitae, consequatur, eveniet ducimus totam quis amet, quam beatae? Harum corrupti iure odio perferendis corporis totam eos id autem neque, aut vero at repudiandae soluta quibusdam dolor,
laborum molestias! Excepturi necessitatibus, incidunt saepe id voluptatibus sapiente mollitia, similique nulla in earum dignissimos porro quis beatae, molestiae recusandae eveniet minus cupiditate tempora! Error quo eum qui fugit itaque accusantium
non ullam saepe sunt incidunt quidem quaerat ea eius doloribus possimus totam, tenetur quis mollitia. Porro, cumque vero modi quo architecto ullam commodi aspernatur repudiandae ipsum sunt dolorem neque fugiat vitae a ex nihil vel tenetur laborum
eligendi aut rem. Magnam quidem soluta vero amet expedita. Officiis, laborum eveniet. Nobis, reiciendis natus! Optio, delectus! Voluptates, unde aliquid fuga odio perferendis at nemo qui quidem velit ullam tempora accusantium, molestias voluptatibus
ratione libero laudantium illo, aperiam dolorum earum exercitationem quae neque voluptate! Nihil explicabo sed sequi provident neque repellat quia quasi, doloremque tempore repellendus.</p>
</div>
</body>
</html>
change position: absolute; to position: fixed; for your pseudo-elements. That will align the background to the top of the viewport instead of the body document.
body {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
background: #091921;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#e91e63, #ffc107);
clip-path: circle(22% at 30% 20%);
z-index: -1;
}
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#ffffff, #da00ff);
clip-path: circle(20% at 70% 90%);
z-index: -1;
}
.container {
margin: 50px 0;
width: 60%;
padding: 20px 40px;
background-color: rgba(255, 355, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis vero placeat dicta reprehenderit quam soluta, nisi suscipit molestias voluptatibus itaque autem similique, quo ullam sint. Mollitia magnam quos rem veniam sit, nulla repellat
ab saepe fugit, numquam necessitatibus vel qui consequatur unde autem cum repellendus dolorum harum veritatis dolor et natus perferendis dolore culpa. Nostrum veritatis accusamus molestias porro sint veniam officia! Harum eaque corporis aperiam
nobis ea vitae animi consectetur libero sed nisi repellendus voluptatum illum voluptate veniam quisquam ullam, assumenda rerum tempora et ducimus, quod nam officia. Velit, dolores molestiae error laudantium minus consectetur natus vero ducimus esse
voluptatibus delectus nam dolore tempore expedita ad pariatur repellendus rerum fugiat recusandae unde iste omnis repellat. Vero eos ex dolorum explicabo eum placeat rem, unde nobis id veritatis molestias harum beatae enim, obcaecati sed, provident
iusto error minus quis? Tenetur aliquid ipsa illo tempora odio ab. Doloremque laudantium, officia accusantium non autem blanditiis incidunt alias. Debitis at ullam esse nihil! Est, hic quasi! Voluptas rem mollitia dolorum accusamus ipsa non ipsam
odit quis debitis quasi aliquid tempore vel totam porro possimus ullam inventore sunt, in accusantium, maiores natus. Magnam, aut quaerat alias beatae commodi eum autem repellat accusamus esse in corrupti amet maiores dolorem maxime exercitationem
omnis totam natus adipisci suscipit. Rerum maiores, nobis eligendi repudiandae doloremque mollitia deserunt praesentium expedita, odio fugiat quae quas. Laboriosam eaque rem praesentium quam vero fugit debitis, odio sed ad. Doloribus quod saepe
nisi earum sapiente tempore expedita modi perspiciatis cum aut vitae, consequatur, eveniet ducimus totam quis amet, quam beatae? Harum corrupti iure odio perferendis corporis totam eos id autem neque, aut vero at repudiandae soluta quibusdam dolor,
laborum molestias! Excepturi necessitatibus, incidunt saepe id voluptatibus sapiente mollitia, similique nulla in earum dignissimos porro quis beatae, molestiae recusandae eveniet minus cupiditate tempora! Error quo eum qui fugit itaque accusantium
non ullam saepe sunt incidunt quidem quaerat ea eius doloribus possimus totam, tenetur quis mollitia. Porro, cumque vero modi quo architecto ullam commodi aspernatur repudiandae ipsum sunt dolorem neque fugiat vitae a ex nihil vel tenetur laborum
eligendi aut rem. Magnam quidem soluta vero amet expedita. Officiis, laborum eveniet. Nobis, reiciendis natus! Optio, delectus! Voluptates, unde aliquid fuga odio perferendis at nemo qui quidem velit ullam tempora accusantium, molestias voluptatibus
ratione libero laudantium illo, aperiam dolorum earum exercitationem quae neque voluptate! Nihil explicabo sed sequi provident neque repellat quia quasi, doloremque tempore repellendus.</p>
</div>
</body>
</html>
Here I want to have a text padding/margin on the bottom part of my Div, to have a more organized and tidier look.
I want it to be flexible and handle to an unknown size text there.
.container {
width: 180px;
height: 140px;
background-color: #777;
overflow: hidden;
/*padding-bottom: 10px; */
}
.inner {
/* height: 134px; */
}
p {
margin-bottom: 10px;
}
<div class="container">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
</div>
You may hack it with a sticky position element that will define you margin:
.container {
width: 180px;
height: 140px;
background-color: #777;
overflow: hidden;
}
.container:after {
content: "";
display: block;
height: 15px;
position: sticky;
bottom: 0;
background: inherit;
}
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
A more generic code would be to add both pseudo element and remove the margin from p
.container {
width: 180px;
height: 140px;
background-color: #777;
overflow: hidden;
}
.container:before,
.container:after {
content: "";
display: block;
height: 15px;
position: sticky;
top:0;
bottom: 0;
background: inherit;
}
p {
margin: 0;
}
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
The latter will also work if you want to consider scroll:
.container {
width: 180px;
height: 140px;
background-color: #777;
overflow: auto;
}
.container:before,
.container:after {
content: "";
display: block;
height: 15px;
position: sticky;
top:0;
bottom: 0;
background: inherit;
}
p {
margin: 0;
}
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
You can also limit the height of inner div like below:
.container {
width: 180px;
height: 140px;
overflow: hidden;
background-color: #777;
}
.inner {
height:calc(100% - 2*15px);
overflow: hidden;
margin:15px 0;
}
p {
margin:0;
}
<div class="container">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
</div>
Here I want to have a text padding/margin on the bottom part of my Div, to have a more organized and tidier look.
I want it to be flexible and handle to an unknown size text there.
.container {
width: 180px;
height: 140px;
background-color: #777;
overflow: hidden;
/*padding-bottom: 10px; */
}
.inner {
/* height: 134px; */
}
p {
margin-bottom: 10px;
}
<div class="container">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
</div>
You may hack it with a sticky position element that will define you margin:
.container {
width: 180px;
height: 140px;
background-color: #777;
overflow: hidden;
}
.container:after {
content: "";
display: block;
height: 15px;
position: sticky;
bottom: 0;
background: inherit;
}
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
A more generic code would be to add both pseudo element and remove the margin from p
.container {
width: 180px;
height: 140px;
background-color: #777;
overflow: hidden;
}
.container:before,
.container:after {
content: "";
display: block;
height: 15px;
position: sticky;
top:0;
bottom: 0;
background: inherit;
}
p {
margin: 0;
}
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
The latter will also work if you want to consider scroll:
.container {
width: 180px;
height: 140px;
background-color: #777;
overflow: auto;
}
.container:before,
.container:after {
content: "";
display: block;
height: 15px;
position: sticky;
top:0;
bottom: 0;
background: inherit;
}
p {
margin: 0;
}
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
You can also limit the height of inner div like below:
.container {
width: 180px;
height: 140px;
overflow: hidden;
background-color: #777;
}
.inner {
height:calc(100% - 2*15px);
overflow: hidden;
margin:15px 0;
}
p {
margin:0;
}
<div class="container">
<div class="inner">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>
</div>
My CSS is messed up, I've tried to fix it for the last 4 hours and I couldn't fix that.. I got a div inside another divs which are all under the same section.
The '.app' div gets out the of the section and moving down over another section
Here is a picture to explain better:
html:
<section id="portfolio" data-aos="fade-right">
<h1 data-aos="slide-right">My Projects</h1>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="app">
<div class="image">
<img src="../assets/images/coupon.jpg" alt="" />
</div>
<ul>
<li><span> Name: </span> Coupon System</li>
<li><span>Description:</span> Final project in studies</li>
<li><span>Back-end:</span> Java,Spring Framework, Hibernate</li>
<li><span>Front-end:</span> Angular, CSS, Html</li>
<li><span>Database:</span> MySQL</li>
<li>
<span>Link:</span>
<button
onclick="window.open('http://coupon1.us-east-2.elasticbeanstalk.com','_blank')"
>
click here
</button>
</li>
</ul>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
css:
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
#portfolio {
background: #00ff40;
padding: 30px 10px 30px 10px;
}
.app {
position: absolute;
display: flex;
flex-wrap: wrap;
height: 100%;
background-color: #bc2a8d;
}
.app .image {
display: flex;
flex-direction: column;
min-width: 100%;
justify-content: center;
align-items: center;
height: 30%;
}
.app .image img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
}
As you can also see there is a big space between the picture and the text inside the main div which I would like to remove.
thanks by heart!
Update: to make it easier to fix I removed the '.app' div and used a new one with only paragraph inside:
<div class="swiper-container">
<div class="swiper-wrapper">
<div>
<p>
facilis nobis atque quod eum maxime non aspernatur, consequatur
ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus
nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo
atque perferendis laboriosam excepturi cum consequuntur deleniti?
Cumque adipisci asperiores doloremque saepe optio nam temporibus
labore totam. Provident, amet officiis? Numquam dicta officia
nulla autem blanditiis ratione. Nam placeat doloribus veniam
perspiciatis corrupti ratione, odio deserunt repellat, adipisci
recusandae incidunt culpa fuga aspernatur et temporibus illum
suscipit reiciendis saepe quam. Iusto illo culpa veritatis
consequuntur alias quo a nulla soluta eveniet reprehenderit
sapiente veniam nam, commodi est officiis porro aliquid.
Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,
quo ab. Adipisci consequuntur ut hic repellendus? Eligendi
mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui
tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo
doloremque eius quisquam eos ad corrupti. Labore accusantium totam
eaque natus iste incidunt praesentium? Voluptatum numquam dolorem
vitae mollitia quae! Molestias laboriosam, sapiente, earum
accusantium unde aperiam itaque corrupti culpa pariatur maiores
obcaecati sint illo veniam. Architecto optio minus voluptas
voluptatum quibusdam, neque odit nihil ex officiis explicabo
voluptates quod. Omnis, ab consequuntur! Quam inventore ut non
odio velit doloribus rem, cum amet iusto quia suscipit? Culpa
minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti
illo enim mollitia quaerat officia commodi optio laborum
blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi
quam! A, inventore accusantium. Totam quibusdam quam dignissimos
quisquam reprehenderit quidem tenetur fuga voluptates minus
praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus
ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in
minus quidem sit, consectetur fugiat obcaecati veritatis,
architecto aperiam eaque sed delectus vero debitis accusantium
laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,
provident non iusto dolorem inventore. Excepturi explicabo
quisquam qui commodi corporis dolore. Minima, beatae alias
perferendis quaerat deserunt, obcaecati eveniet consectetur, odio
quos dolor repellat? Aliquid, impedit quasi ratione blanditiis
ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat
vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque
cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni
officia quasi a error accusamus? Cumque ad, iure necessitatibus
excepturi animi ipsum debitis distinctio maxime, cupiditate
impedit vel quis quo explicabo error deleniti accusamus autem
quae, rerum exercitationem deserunt illo repellat. Enim distinctio
reprehenderit quas? Quos reiciendis nemo provident porro adipisci
quam magni perferendis vero error necessitatibus, reprehenderit
corrupti labore deleniti ea non cumque nobis harum incidunt?
Commodi ratione quis obcaecati vel eligendi excepturi quasi.
Libero quae earum neque consequuntur vero tempora! Aliquid
officiis architecto sunt pariatur maiores consectetur officia
doloribus iste provident soluta ab, distinctio vel illum
voluptates nulla ea doloremque odio nemo voluptas.
</p>
</div>
result is still the same though:
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
#portfolio {
background: #00ff40;
padding: 30px 10px 30px 10px;
}
#portfolio h1 {
margin-bottom: 0px;
margin: 0;
text-align: center;
font-size: 20px;
border-bottom: 3px solid rgb(223, 0, 0);
}
.app {
position: absolute;
display: flex;
flex-wrap: wrap;
height: 100%;
background-color: #bc2a8d;
}
.app .image {
display: flex;
flex-direction: column;
min-width: 100%;
justify-content: center;
align-items: center;
height: 30%;
}
.app .image img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
}
<section id="portfolio" data-aos="fade-right">
<h1 data-aos="slide-right">My Projects</h1>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div>
<p>
facilis nobis atque quod eum maxime non aspernatur, consequatur
ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus
nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo
atque perferendis laboriosam excepturi cum consequuntur deleniti?
Cumque adipisci asperiores doloremque saepe optio nam temporibus
labore totam. Provident, amet officiis? Numquam dicta officia
nulla autem blanditiis ratione. Nam placeat doloribus veniam
perspiciatis corrupti ratione, odio deserunt repellat, adipisci
recusandae incidunt culpa fuga aspernatur et temporibus illum
suscipit reiciendis saepe quam. Iusto illo culpa veritatis
consequuntur alias quo a nulla soluta eveniet reprehenderit
sapiente veniam nam, commodi est officiis porro aliquid.
Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,
quo ab. Adipisci consequuntur ut hic repellendus? Eligendi
mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui
tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo
doloremque eius quisquam eos ad corrupti. Labore accusantium totam
eaque natus iste incidunt praesentium? Voluptatum numquam dolorem
vitae mollitia quae! Molestias laboriosam, sapiente, earum
accusantium unde aperiam itaque corrupti culpa pariatur maiores
obcaecati sint illo veniam. Architecto optio minus voluptas
voluptatum quibusdam, neque odit nihil ex officiis explicabo
voluptates quod. Omnis, ab consequuntur! Quam inventore ut non
odio velit doloribus rem, cum amet iusto quia suscipit? Culpa
minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti
illo enim mollitia quaerat officia commodi optio laborum
blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi
quam! A, inventore accusantium. Totam quibusdam quam dignissimos
quisquam reprehenderit quidem tenetur fuga voluptates minus
praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus
ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in
minus quidem sit, consectetur fugiat obcaecati veritatis,
architecto aperiam eaque sed delectus vero debitis accusantium
laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,
provident non iusto dolorem inventore. Excepturi explicabo
quisquam qui commodi corporis dolore. Minima, beatae alias
perferendis quaerat deserunt, obcaecati eveniet consectetur, odio
quos dolor repellat? Aliquid, impedit quasi ratione blanditiis
ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat
vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque
cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni
officia quasi a error accusamus? Cumque ad, iure necessitatibus
excepturi animi ipsum debitis distinctio maxime, cupiditate
impedit vel quis quo explicabo error deleniti accusamus autem
quae, rerum exercitationem deserunt illo repellat. Enim distinctio
reprehenderit quas? Quos reiciendis nemo provident porro adipisci
quam magni perferendis vero error necessitatibus, reprehenderit
corrupti labore deleniti ea non cumque nobis harum incidunt?
Commodi ratione quis obcaecati vel eligendi excepturi quasi.
Libero quae earum neque consequuntur vero tempora! Aliquid
officiis architecto sunt pariatur maiores consectetur officia
doloribus iste provident soluta ab, distinctio vel illum
voluptates nulla ea doloremque odio nemo voluptas.
</p>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
I think is the position in your CSS is causing overlapping.
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.
.
.
.app {
position: absolute;
display: flex;
flex-wrap: wrap;
height: 100%;
background-color: #bc2a8d;
}
Try to add another div outside the class .app that have the hight match the content.
Or Just remove the position.
I'm not sure why you use the position here, so I can't give you an alternative.
If you just want to center it, you can try to use margin.
What is the best way to achieve this layout:
I believe that this HTML is good, I just need the CSS:
<div>
<header style="background:blue"></header>
<div>
<nav>
<header style="background:darkgreen"></header>
<ul style="background:green">...</ul>
</nav>
<div>
<header style="background:darkred"></header>
<main style="background:red"></main>
</div>
</div>
</div>
I've tried flexbox, but I'm finding myself doing weird css calc() to get the green and red div's to stretch to the bottom.
(I'm looking for a modern, solid way- not hacks)
I am not sure how to do with your HTML. And not sure what you mean by Holy Grail. I just did this, with semantic tags and which has no hacks, compatible over a range of browsers from Internet Explorer 7:
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
background-color: #fcc;
}
header {
position: fixed;
top: 0;
background-color: #66f;
left: 0;
right: 0;
height: 35px;
line-height: 35px;
}
aside {
position: fixed;
left: 0;
top: 35px;
width: 200px;
bottom: 0;
}
aside header {
position: absolute;
background-color: #f90;
}
aside .content {
position: absolute;
top: 35px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: #fc6;
}
main {
margin: 40px 10px 10px 210px;
}
main header {
top: 35px;
left: 200px;
background-color: #f33;
line-height: 20px;
height: 20px;
}
<header>
...
</header>
<aside>
<header>
...
</header>
<div class="content">
<p>Content goes here...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae unde, eligendi dolores laborum aliquid voluptatem ducimus adipisci dolorem quod ipsum corrupti soluta. Eveniet repellendus sed cumque, consectetur eum magni saepe!</p>
<p>Tenetur debitis nemo, itaque ipsa, eum tempore doloribus mollitia quas nulla accusantium unde officia rerum optio quasi a dicta error distinctio iusto, provident deleniti? Commodi perspiciatis qui ratione autem sequi.</p>
<p>Placeat saepe libero sunt cupiditate. Expedita molestias, error sequi mollitia consequatur iste aliquid deserunt deleniti repellat saepe vitae necessitatibus eum. Soluta nemo dicta fugit repellendus! Dignissimos, aliquid. Iusto, voluptatum, voluptatibus.</p>
<p>Sequi eaque officiis ab dolores aliquid, harum, nemo nam et deleniti quo aliquam, placeat, est natus iusto. Impedit assumenda ullam, tempore saepe rem adipisci, id ex, iste, dignissimos doloribus corrupti!</p>
<p>Illum nemo nihil, exercitationem autem ullam, aliquam dolorum inventore laborum quasi similique neque vero aliquid ad perferendis asperiores iusto? Quo autem recusandae, obcaecati iusto quas minus dicta reprehenderit magni quaerat.</p>
<p>Excepturi magnam rerum facere culpa a harum explicabo nostrum aspernatur. Molestiae voluptates exercitationem hic assumenda nesciunt fugit error nemo sapiente nihil consequatur illo omnis ipsum reiciendis, veniam rerum, eaque asperiores!</p>
<p>Iusto fugit mollitia, non deserunt assumenda nobis saepe id, dolorum cum culpa magni ea consectetur odio possimus facere velit voluptatum aperiam quibusdam hic, esse animi debitis. In qui cupiditate iste!</p>
<p>Eveniet nam vero maiores reiciendis totam pariatur magni tempora, rerum magnam ex, blanditiis a, odit labore consectetur ea modi minus dolore aspernatur voluptates. Magnam, hic sed omnis vel delectus? Eligendi.</p>
<p>Eveniet nesciunt laborum a officiis, numquam magnam, incidunt libero unde dolorum voluptatum, ducimus illo in eum reiciendis ad dolor eos consequuntur saepe ex repellat porro quae. Voluptatum architecto cupiditate officia.</p>
<p>Voluptate, voluptatem culpa explicabo distinctio obcaecati quia molestiae blanditiis optio quis nihil, ipsam similique molestias exercitationem quas itaque, dignissimos quisquam modi. Impedit et dolorum, laboriosam modi aliquam dolor quasi possimus!</p>
<p>Ad dolores consequuntur accusantium laborum, provident laudantium quas voluptatibus exercitationem distinctio adipisci, corporis, amet alias optio nisi! Doloremque incidunt debitis molestiae eius similique facere nobis libero esse temporibus quisquam,
aperiam?</p>
<p>Quis accusamus itaque adipisci modi perspiciatis provident suscipit assumenda totam quo placeat reiciendis, nulla ad aperiam nobis sint velit ducimus eos culpa cupiditate in, quod veritatis nihil ut quidem! Ab.</p>
<p>Consequuntur maiores quas alias labore architecto laboriosam nisi voluptatum impedit rem. Doloribus cumque, unde ducimus possimus, voluptate cupiditate veniam est, sequi, libero velit ipsa ab deleniti earum odio? Minus, earum.</p>
<p>Molestiae iusto placeat vitae mollitia maxime ipsa ad in praesentium quasi cupiditate temporibus doloremque numquam, veritatis esse et odio dolores rerum iure alias quis, quisquam, amet maiores. Sequi, eaque reprehenderit.</p>
<p>Qui hic voluptatum adipisci reprehenderit repudiandae, libero illum aliquam iure, dolores tempora, quo consequuntur odit. Exercitationem blanditiis sunt, ea consequuntur, incidunt dolor harum neque fugiat natus tempore assumenda, deleniti dolorem?</p>
</div>
</aside>
<main>
<header>
...
</header>
</main>
Preview
If you want using flex for that do this:
<div style="display:flex;flex-direction:column;height: 100vh;">
<div style="background-color:blue;height:50px;"></div>
<div style="background-color:red;flex:1;display: flex;">
<div style="background-color: green;flex: 1;">
<div style="background-color: darkgreen;height: 80px;"></div>
<div style="overflow-y: scroll;"></div>
</div>
<div style="background-color: red;flex: 2;">
<div id="navBar" style="background-color:darkred;height:40px;"></div>
</div>
</div>
</div>
Sorry my code is not clean.