I have a div that has a transparent black so that the actual background color still shows but darkened. Inside this div I have a div with text.
So when added the text to my div I realized it had 2 "scrollable" sections, one for the div with the content and another one for the background div which has 100% width.
The end result should just be one scroll that goes through the page's height and reaches the footer. Instead, right now I have to scroll inside the content div to see all the text and only when I place the mouse on the background div in the sides I'm able to reach the end of the page.
Here is the Code:
Maybe I am using the wrong elements or there is another way to get the same effect that I am trying to achieve.
*
{
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', monospace;
}
body
{
/*background: linear-gradient(-45deg, #ff933b, #e73c7e, #27e1ee, #20f3c2);*/
background: linear-gradient(-45deg, #ffe1c8, #ffebf3, #e6ebeb, #eeebd5);
background-size: 400% 400%;
animation: gradient 20s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
header
{
z-index: 10;
backface-visibility: hidden;
background: inherit;
transition: 0.4s;
position: sticky;
top: 0;
left: 0;
width: 100%;
padding: 1%;
display: flex;
gap: 5%;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.637);
}
header .logo
{
position: absolute;
left: 5%;
transition: all 0.2s;
max-height: 65px;
}
header .topper
{
transition: ease-in;
transition-duration: 0.4s;
color: black;
text-decoration: none;
text-transform: uppercase;
padding-left: 17%;
letter-spacing: 1%;
font-size: 50px;
}
header ul
{
position: absolute;
display: flex;
gap: 5%;
list-style: none;
}
header ul li
{
padding-left: 4%;
}
header ul li a
{
transition: ease-in;
text-decoration: none;
color: black;
font-size: 20px;
letter-spacing: 2%;
}
header ul li label
{
transition: ease-in;
font-size: 30px;
margin-left: 100%;
}
header ul li a:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header ul li label:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header .topper:hover
{
color: rgb(255, 255, 255);
transition: ease-in;
transition-duration: 0.4s;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.466);
}
div ::-webkit-scrollbar {
display: none;
}
div ::selection {
background: rgba(255, 207, 144, 0.822);
color: black;
}
div .main
{
position: sticky;
color: white;
overflow: auto;
height: 100vh;
z-index: 0;
width: 100%;
background: rgba(0, 0, 0, 0.712);
padding-left: 13.7%;
padding-right: 13.7%;
}
div.content
{
color: white;
overflow: auto;
height: 100vh;
z-index: 1;
padding-left: 5%;
padding-right: 4%;
background: rgba(0, 0, 0, 0.384);;
}
div.content p
{
margin-top: 16px;
}
div.content h1
{
margin-top: 30px;
}
footer
{
z-index: 1;
backface-visibility: hidden;
background: inherit;
width: 100%;
padding: 25px 10%;
box-shadow: -3px -2px 9px rgba(0, 0, 0, 0.637);
}
footer div.footer
{
flex-direction: column;
display: flex;
list-style: none;;
}<!DOCTYPE html>
<html>
<head>
<title>Lorem ipsum</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
<script src="Script.js" defer></script>
<link rel="stylesheet" href="Style.css" media="screen" type="text/css">
</head>
<body>
<header id="header">
<img src="images/MainLogo/logo.png" id="mainLogo"></img>
<a href="#" id="MainTextIcon">Lorem ipsum</a>
<ul id="ul">
<li><a href="#" id="webHeader">Home</a></li>
<li><a href="#" id="webHeader">About</a></li>
<li><a href="#" id="webHeader">Work</a></li>
<li><a href="#" id="webHeader">Contact</a></li>
<li><label for="hamburger" id="burguerButton">☰</label></li>
</ul>
</header>
<div>
<div id="mainContainer">
<div id="contentContainer">
<h1>Lorem ipsum</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
</p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>CodePudding user response：
Scrolling sections are creating by using overflow:auto in CSS. If you remove those you get a single scroll bar for the whole page. However, you will have other problems with overlapping divs that you will need to fix.
*
{
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', monospace;
}
body
{
/*background: linear-gradient(-45deg, #ff933b, #e73c7e, #27e1ee, #20f3c2);*/
background: linear-gradient(-45deg, #ffe1c8, #ffebf3, #e6ebeb, #eeebd5);
background-size: 400% 400%;
animation: gradient 20s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
header
{
z-index: 10;
backface-visibility: hidden;
background: inherit;
transition: 0.4s;
position: sticky;
top: 0;
left: 0;
width: 100%;
padding: 1%;
display: flex;
gap: 5%;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.637);
}
header .logo
{
position: absolute;
left: 5%;
transition: all 0.2s;
max-height: 65px;
}
header .topper
{
transition: ease-in;
transition-duration: 0.4s;
color: black;
text-decoration: none;
text-transform: uppercase;
padding-left: 17%;
letter-spacing: 1%;
font-size: 50px;
}
header ul
{
position: absolute;
display: flex;
gap: 5%;
list-style: none;
}
header ul li
{
padding-left: 4%;
}
header ul li a
{
transition: ease-in;
text-decoration: none;
color: black;
font-size: 20px;
letter-spacing: 2%;
}
header ul li label
{
transition: ease-in;
font-size: 30px;
margin-left: 100%;
}
header ul li a:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header ul li label:hover
{
color: rgb(255, 255, 255);
font-weight: 300;
border: 2px rgba(255, 255, 255, 0.459);
text-shadow: 2px 2px 3px rgb(0, 0, 0);
transition: ease-in;
font-weight: 200;
transition-duration: 0.4s;
}
header .topper:hover
{
color: rgb(255, 255, 255);
transition: ease-in;
transition-duration: 0.4s;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.466);
}
div ::-webkit-scrollbar {
display: none;
}
div ::selection {
background: rgba(255, 207, 144, 0.822);
color: black;
}
div .main
{
position: sticky;
color: white;
height: 100vh;
z-index: 0;
width: 100%;
background: rgba(0, 0, 0, 0.712);
padding-left: 13.7%;
padding-right: 13.7%;
}
div.content
{
color: white;
height: 100vh;
z-index: 1;
padding-left: 5%;
padding-right: 4%;
background: rgba(0, 0, 0, 0.384);;
}
div.content p
{
margin-top: 16px;
}
div.content h1
{
margin-top: 30px;
}
footer
{
z-index: 1;
backface-visibility: hidden;
background: inherit;
width: 100%;
padding: 25px 10%;
box-shadow: -3px -2px 9px rgba(0, 0, 0, 0.637);
}
footer div.footer
{
flex-direction: column;
display: flex;
list-style: none;;
}<!DOCTYPE html>
<html>
<head>
<title>Lorem ipsum</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
<script src="Script.js" defer></script>
<link rel="stylesheet" href="Style.css" media="screen" type="text/css">
</head>
<body>
<header id="header">
<img src="images/MainLogo/logo.png" id="mainLogo"></img>
<a href="#" id="MainTextIcon">Lorem ipsum</a>
<ul id="ul">
<li><a href="#" id="webHeader">Home</a></li>
<li><a href="#" id="webHeader">About</a></li>
<li><a href="#" id="webHeader">Work</a></li>
<li><a href="#" id="webHeader">Contact</a></li>
<li><label for="hamburger" id="burguerButton">☰</label></li>
</ul>
</header>
<div>
<div id="mainContainer">
<div id="contentContainer">
<h1>Lorem ipsum</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tristique nisi. Aliquam ligula mi, euismod id augue sit amet, malesuada pellentesque purus. Sed scelerisque dictum pellentesque.
Nunc tincidunt nibh id mi maximus rutrum ac ut enim. Etiam accumsan diam eget blandit pulvinar.
Mauris scelerisque nisl at magna facilisis vestibulum. Morbi mattis, nunc et vestibulum dignissim, magna odio tincidunt velit, at ullamcorper lacus urna at dolor.
Vivamus et tortor nec diam eleifend condimentum. Nunc ut ex vel ligula dapibus scelerisque eget in dolor. Pellentesque congue varius convallis. Curabitur efficitur volutpat orci, nec rutrum magna tempor eget.
Maecenas bibendum hendrerit cursus. Nulla vehicula tristique turpis ac dictum. Vivamus quis lobortis sapien, vel aliquet magna. Suspendisse porta ex eros, at tempor nisl maximus sed.
</p>
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>CodePudding user response：
You should remove
height: 100vh;
from both div.main and div.content CSS selectors. Because defining the height of the divs is what makes the scroll bar appear.
Here is the CodeSandBox Link. https://codesandbox.io/s/frosty-bogdan-m22tdj?file=/Style.css