I have made a couple 'Covers' for a Book Alike Online Shop, but I want to add the description under every image I have put (It's going to be the Book Descriptions). But I don't want it to go all the way down when i add a long desc! I want the description to be on a max size of padding 10px 0px 300px (bottom) not more than 300px on the bottom and if I make a long description, I want that description to be inside the padding under the book cover, not to go all the way down the page, so people can scroll down to read the description but page should not scroll! Basically, Long Book Description which the Description can be scrolled but not the page! And the Desc should stay inside the Book's Page!
Just like a normal online book store online! Thank you!
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
padding-left: 10%;
padding-right: 10%;
}
.logo {
color: white;
font-size: 28px;
}
.span1 {
color: white;
font-size: 20px;
background-color: #ea1538;
border-radius: 30px;
padding: 5px 8px;
}
span {
color: #ea1538;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
transition: 0.5s;
}
nav ul li a:hover {
color: white;
transition: 0.3s;
border-radius: 30px;
background-color: #ea1538;
padding: 8px 12px;
}
#active {
color: white;
background: #ea1538;
padding: 5px 8px;
border-radius: 30px;
}
button {
border: none;
background: #ea1538;
padding: 12px 40px;
border-radius: 30px;
color: white;
font-weight: bold;
font-size: 15px;
transition: 0.5s;
outline: 1px solid #ea1538;
}
button:hover {
transform: scale(1.2);
transition: ease 0.5s;
cursor: pointer;
outline: 3px solid #ea1538;
outline-offset: 3px;
}
.button {
text-align: center;
color: white;
text-decoration: none;
font-weight: bold;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.footer {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
flex-flow: row wrap;
padding: 50px;
color: white;
background: #262626;
}
.footer>* {
flex: 1 100%;
}
.l-footer {
margin-right: 1.25em;
margin-bottom: 2em;
}
h2 {
font-weight: 900;
font-size: 16px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer li {
line-height: 2em;
}
.footer a {
text-decoration: none;
}
.footer a:hover {
background-color: #ea1538;
padding: 3px 5px;
border-radius: 30px;
transition: ease 0.3s;
color: white;
font-weight: bold;
letter-spacing: 1px;
}
.r-footer {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
flex-flow: row wrap;
}
.r-footer>* {
flex: 1 50%;
margin-right: 1.25em;
}
.box a {
text-decoration: none;
color: #999;
}
.h-box {
column-count: 2;
column-gap: 1.25em;
}
.b-footer {
text-align: center;
color: #999;
padding-top: 50px;
}
.l-footer p {
padding-right: 20%;
color: #999;
}
@media screen and (min-width: 600px) {
.r-footer>* {
flex: 1;
}
.features {
flex-grow: 2;
}
.l-footer {
flex: 1 0px;
}
.r-footer {
flex: 2 0px;
}
}
.box1 {
float: left;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
box-sizing: border-box;
}
.box1:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover1 {
width: 100%;
height: 100%;
}
.box2 {
display: inline-block;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 17%;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box2:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover2 {
width: 100%;
height: 100%;
}
.box3 {
float: right;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-right: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box3:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover3 {
width: 100%;
height: 100%;
}
.box4 {
float: left;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box4:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover4 {
width: 100%;
height: 100%;
}
.box5 {
display: inline-block;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 17%;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box5:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover5 {
width: 100%;
height: 100%;
}
.box6 {
float: right;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-right: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box6:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover6 {
width: 100%;
height: 100%;
}
.box7 {
float: left;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box7:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover7 {
width: 100%;
height: 100%;
}
.box8 {
display: inline-block;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 17%;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box8:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover8 {
width: 100%;
height: 100%;
}
.box9 {
float: right;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-right: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box9:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover9 {
width: 100%;
height: 100%;
}<!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" />
<link rel="stylesheet" href="Styles/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />
<title>myPage</title>
</head>
<body>
<!-- Navbar and Logo -->
<div >
<nav>
<h2 >
Be <span>Smart</span> <br />
<span >Technologies</span>
</h2>
<ul>
<li><a href="index.html" id="active">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<button type="button"><a href="#" >Subscribe</a></button>
</nav>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover1" />
<h3 >This is Book Cover 1</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover2" />
<h3>This is Book Cover 2</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover3" />
<h3>This is Book Cover 3</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover4" />
<h3>This is Book Cover 4</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover5" />
<h3>This is Book Cover 5</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover6" />
<h3>This is Book Cover 6</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover7" />
<h3>This is Book Cover 7</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover8" />
<h3>This is Book Cover 8</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover9" />
<h3>This is Book Cover 9</h3>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- Footer and Properties -->
<footer >
<div >
<h1>
Be <span>Smart</span> <br /><span >Technologies</span>
</h1>
<br />
<p>
Be Smart Technologies or <em>BSS</em> is a company that creates websites, portfolios, responsive pages and designs!
</p>
</div>
<ul >
<li>
<h2>Explore</h2>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li >
<h2>Need Help?</h2>
<ul >
<li><a href="#">Blog</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Certifications</a></li>
<li><a href="#">Customer Services</a></li>
</ul>
</li>
<li>
<h2>Legal</h2>
<ul >
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Contract</a></li>
</ul>
</li>
</ul>
<div >
<p>All Rights Reserved by ©BeSmart Technologies 2022</p>
</div>
</footer>
</body>
</html>CodePudding user response：
Maybe use css max-height and overflow-y:scroll
Currently I directly tag all the div tag, but you could tag all the box from box1 to box9 or assign class to them.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
div{
max-height:300px;
overflow-y:scroll;
}
div::-webkit-scrollbar {
display: none;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
padding-left: 10%;
padding-right: 10%;
}
.logo {
color: white;
font-size: 28px;
}
.span1 {
color: white;
font-size: 20px;
background-color: #ea1538;
border-radius: 30px;
padding: 5px 8px;
}
span {
color: #ea1538;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
transition: 0.5s;
}
nav ul li a:hover {
color: white;
transition: 0.3s;
border-radius: 30px;
background-color: #ea1538;
padding: 8px 12px;
}
#active {
color: white;
background: #ea1538;
padding: 5px 8px;
border-radius: 30px;
}
button {
border: none;
background: #ea1538;
padding: 12px 40px;
border-radius: 30px;
color: white;
font-weight: bold;
font-size: 15px;
transition: 0.5s;
outline: 1px solid #ea1538;
}
button:hover {
transform: scale(1.2);
transition: ease 0.5s;
cursor: pointer;
outline: 3px solid #ea1538;
outline-offset: 3px;
}
.button {
text-align: center;
color: white;
text-decoration: none;
font-weight: bold;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.footer {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
flex-flow: row wrap;
padding: 50px;
color: white;
background: #262626;
}
.footer>* {
flex: 1 100%;
}
.l-footer {
margin-right: 1.25em;
margin-bottom: 2em;
}
h2 {
font-weight: 900;
font-size: 16px;
}
.footer ul {
list-style: none;
padding-left: 0;
}
.footer li {
line-height: 2em;
}
.footer a {
text-decoration: none;
}
.footer a:hover {
background-color: #ea1538;
padding: 3px 5px;
border-radius: 30px;
transition: ease 0.3s;
color: white;
font-weight: bold;
letter-spacing: 1px;
}
.r-footer {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
flex-flow: row wrap;
}
.r-footer>* {
flex: 1 50%;
margin-right: 1.25em;
}
.box a {
text-decoration: none;
color: #999;
}
.h-box {
column-count: 2;
column-gap: 1.25em;
}
.b-footer {
text-align: center;
color: #999;
padding-top: 50px;
}
.l-footer p {
padding-right: 20%;
color: #999;
}
@media screen and (min-width: 600px) {
.r-footer>* {
flex: 1;
}
.features {
flex-grow: 2;
}
.l-footer {
flex: 1 0px;
}
.r-footer {
flex: 2 0px;
}
}
.box1 {
float: left;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
box-sizing: border-box;
}
.box1:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover1 {
width: 100%;
height: 100%;
}
.box2 {
display: inline-block;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 17%;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box2:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover2 {
width: 100%;
height: 100%;
}
.box3 {
float: right;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-right: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box3:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover3 {
width: 100%;
height: 100%;
}
.box4 {
float: left;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box4:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover4 {
width: 100%;
height: 100%;
}
.box5 {
display: inline-block;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 17%;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box5:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover5 {
width: 100%;
height: 100%;
}
.box6 {
float: right;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-right: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box6:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover6 {
width: 100%;
height: 100%;
}
.box7 {
float: left;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box7:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover7 {
width: 100%;
height: 100%;
}
.box8 {
display: inline-block;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-left: 17%;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box8:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover8 {
width: 100%;
height: 100%;
}
.box9 {
float: right;
color: white;
font-weight: 100;
background-color: rgba(234, 21, 56, 0.3);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
border: 3px solid red;
width: 300px;
margin-right: 20px;
margin-top: 40px;
transition: ease 0.5s;
padding: 100px 10px;
}
.box9:hover {
transition: ease 0.5s;
transform: scale(1.1);
}
#cover9 {
width: 100%;
height: 100%;
}<!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" />
<link rel="stylesheet" href="Styles/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />
<title>myPage</title>
</head>
<body>
<!-- Navbar and Logo -->
<div >
<nav>
<h2 >
Be <span>Smart</span> <br />
<span >Technologies</span>
</h2>
<ul>
<li><a href="index.html" id="active">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<button type="button"><a href="#" >Subscribe</a></button>
</nav>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover1" />
<h3 >This is Book Cover 1</h3>
An encyclopedia (American English), encyclopædia (archaic spelling), or encyclopaedia (British English) is a reference work or compendium providing summaries of knowledge either from all branches or from a particular field or discipline.[1] Encyclopedias are divided into articles or entries that are often arranged alphabetically by article name[2] and sometimes by thematic categories. Encyclopedia entries are longer and more detailed than those in most dictionaries.[2] Generally speaking, encyclopedia articles focus on factual information concerning the subject named in the article's title; this is unlike dictionary entries, which focus on linguistic information about words, such as their etymology, meaning, pronunciation, use, and grammatical forms.
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover2" />
<h3>This is Book Cover 2</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover3" />
<h3>This is Book Cover 3</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover4" />
<h3>This is Book Cover 4</h3>
An encyclopedia (American English), encyclopædia (archaic spelling), or encyclopaedia (British English) is a reference work or compendium providing summaries of knowledge either from all branches or from a particular field or discipline.[1] Encyclopedias are divided into articles or entries that are often arranged alphabetically by article name[2] and sometimes by thematic categories. Encyclopedia entries are longer and more detailed than those in most dictionaries.[2] Generally speaking, encyclopedia articles focus on factual information concerning the subject named in the article's title; this is unlike dictionary entries, which focus on linguistic information about words, such as their etymology, meaning, pronunciation, use, and grammatical forms.
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover5" />
<h3>This is Book Cover 5</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover6" />
<h3>This is Book Cover 6</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover7" />
<h3>This is Book Cover 7</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover8" />
<h3>This is Book Cover 8</h3>
</div>
<div >
<img src="/images/Books/book_bg.jpg" alt="cover" id="cover9" />
<h3>This is Book Cover 9</h3>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- Footer and Properties -->
<footer >
<div >
<h1>
Be <span>Smart</span> <br /><span >Technologies</span>
</h1>
<br />
<p>
Be Smart Technologies or <em>BSS</em> is a company that creates websites, portfolios, responsive pages and designs!
</p>
</div>
<ul >
<li>
<h2>Explore</h2>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li >
<h2>Need Help?</h2>
<ul >
<li><a href="#">Blog</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Certifications</a></li>
<li><a href="#">Customer Services</a></li>
</ul>
</li>
<li>
<h2>Legal</h2>
<ul >
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Contract</a></li>
</ul>
</li>
</ul>
<div >
<p>All Rights Reserved by ©BeSmart Technologies 2022</p>
</div>
</footer>
</body>
</html>Hide the scrollbar:
use
//In Chrome, Safari and Opera
::-webkit-scrollbar {
display: none;
}
CodePudding user response：
I found the answer by a little research!
Here for anyone that might need it: https://blog.hubspot.com/website/hide-scrollbar-css
Scroll without scrolling the page!