Why is there white space on the bottom of the web page - html

Question

The white space is visible when I select a height over 20px at the last CSS Element. The
class "roadmap-box"
Near the bottom of the HTML Body Element. The top white box is the "roadmap-box" Click here to see the image
Whenever I try to adjust the height, the top white box becomes bigger, but also the white box at the bottom grows in size. I dont know how to fix that.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.5)), url(Background/3.jpg);
background-size: cover;
background-position: center;
padding-bottom: 2100px;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.profile-signature {
width: 300px;
object-position: top;
object-fit: contain;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar ul li::after {
content: '';
height: 3px;
width: 0;
background: #009688;
position: absolute;
left: 0;
bottom: -10px;
transition: 0.5s;
}
.navbar ul li:hover::after {
width: 100%;
}
.profile-picture {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
cursor: pointer;
box-shadow: 16px 16px 32px rgba(255, 255, 255, 0.3), -16px -16px 32px rgba(255, 255, 255, 0.3);
transition: 0.5s;
}
.profile-picture:hover {
width: 275px;
height: 275px;
transform: translateY(-25px);
transition: 0.5s;
}
.content {
width: 100%;
position: absolute;
top: 60;
transform: translateY(25px);
text-align: center;
color: white;
}
.content h1 {
font-size: 70px;
margin-top: 60px;
}
.content p {
margin: 20px auto;
font-weight: 100;
line-height: 25px;
}
button {
width: 200px;
padding: 15px 0;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 2px solid #009688;
background: transparent;
color: white;
cursor: pointer;
position: relative;
overflow: hidden;
}
span {
background: #009688;
height: 100%;
width: 0;
border-radius: 25px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}
button:hover span {
width: 100%;
}
button:hover {
border: none
}
.text-box {
height: 600px;
border: 3px;
border-style: none;
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(500px);
display: flex;
justify-content: space-around;
}
.images-box1 {
background-color: rgba(68, 218, 185, 0.05);
border-radius: 77px;
width: 375px;
height: 628px;
border: 5px;
border-color: #1f534f;
border-style: solid none;
align-items: center;
cursor: pointer;
z-index: -1;
transition: 0.7s;
}
.images-box1:hover {
background: rgb(152, 152, 152);
background: linear-gradient(3deg, rgba(152, 152, 152, 0) 0%, rgba(255, 255, 255, 0.3113620448179272) 100%);
height: 300px;
margin-top: 20px;
background: #009688;
transition: 0.7s;
}
.text-image {
border-radius: 75px;
width: 375px;
height: 300px;
display: flex;
justify-content: left;
align-items: center;
flex-direction: column;
object-fit: cover;
object-position: middle;
}
.text-title-box1 {
text-align: start;
margin-top: 10px;
text-align: center;
}
p {
padding-top: 20px;
transition: 0.5s;
}
p:hover {
transition: 0.5s;
}
.bottom-parent {
position: relative;
}
.bottom {
display: block;
width: 100%;
position: absolute;
bottom: 0;
height: 45px;
background-color: rgb(21, 105, 87);
}
.text-bottom {
display: flex;
justify-content: center;
text-indent: 20px;
padding-right: 20px;
padding-top: 13px;
color: white;
}
.twitter-hover {
text-decoration: none;
color: white;
}
.twitter-hover:hover {
text-decoration: underline;
color: rgba(255, 255, 255, 0.685);
}
.linkedin-hover {
text-decoration: none;
color: white;
}
.linkedin-hover:hover {
text-decoration: underline;
color: rgba(255, 255, 255, 0.685);
}
.instagram-hover {
text-decoration: none;
color: white;
}
.instagram-hover:hover {
text-decoration: underline;
color: rgba(255, 255, 255, 0.685);
}
.impressum:hover {
cursor: pointer;
text-decoration: underline;
color: rgba(255, 255, 255, 0.685);
}
.roadmap-box {
width: 100%;
height: 50px;
background-color: white;
transform: translateY(-500px);
}
<div class="banner">
<div class="navbar">
<img class="profile-signature" src="Logo/logo-1.png" alt="Profile Logo">
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>GAMES</li>
<li>SOCIALS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="content">
<a href="https://google.com/" target="_blank">
<img class="profile-picture" src="Logo/logo-2.jpg" alt="Profile Picture">
</a>
<h1>WELCOME TO PARADISE!</h1>
<p>This is a practice website. There's just a bit of text here to fill the lines, blah blah blah.
<br>If you want to know more about me, just have a look around</p>
<div>
<a href="https://google.com/" target="_blank">
<button type="button" href="#middle"><span></span>PORTFOLIO</button>
</a>
<a href="https://twitter.com/" target="_blank">
<button type="button"><span></span>SOCIALS</button>
</a>
</div>
<div class="text-box">
<div class="images-box1">
<img src="designs/1.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Random Design 1</h1>
<p></p>
</div>
</div>
<div class="images-box1">
<img src="designs/2.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Fantasy Shower</h1>
<p>Well, nothing much to explain here. <br> <br> I need some text so have run reading <br> blah blah blah again <br> <br>:)</p>
</div>
</div>
<div class="images-box1">
<img src="designs/3.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Light Bulb Girl</h1>
<p>This image was created 2020. <br> It shows a person beeing stuck inside a lightbulb. Funny right? No deeper <br> intentions, dont look for them, <br> lol</p>
</div>
</div>
<div class="images-box1">
<img src="designs/4.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Random Design 4</h1>
<p>Test</p>
</div>
</div>
</div>
</div>
</div>
<div class="code-image-box">
<div class="code-image">
</div>
</div>
<div class="roadmap-box">
<div class="q1"></div>
<div class="q2"></div>
</div>
<div class="bottom-parent">
<div class="bottom">
<div class="text-bottom">
<a class="twitter-hover" href="https:/twitter.com/" target="_blank">
<div class="twitter">Twitter</div>
</a>
<a class="linkedin-hover" href="https:/linkedin.com/" target="_blank">
<div class="linkedin">LinkedIn</div>
</a>
<a class="instagram-hover" href="https:/instagram.com/" target="_blank">
<div class="instagram">Instagram</div>
</a>
<div class="impressum">Impressum</div>
</a>
</div>
</div>
</div>

Answer 1

The div with class .roadmap-box has been translatedY(-500px) but the browser has still made the space available for it as it's a block-level element. If you hide it then the gap disappears. What's the purpose of it? What are you trying to do with it?
See example below. There's also no need to make .bottom position:absoute as it then gives the div .bottom-parent no height. See modified markup below.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.banner {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.5)), url(Background/3.jpg);
background-size: cover;
background-position: center;
padding-bottom: 2100px;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.profile-signature {
width: 300px;
object-position: top;
object-fit: contain;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar ul li::after {
content: '';
height: 3px;
width: 0;
background: #009688;
position: absolute;
left: 0;
bottom: -10px;
transition: 0.5s;
}
.navbar ul li:hover::after {
width: 100%;
}
.profile-picture {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
cursor: pointer;
box-shadow: 16px 16px 32px rgba(255, 255, 255, 0.3), -16px -16px 32px rgba(255, 255, 255, 0.3);
transition: 0.5s;
}
.profile-picture:hover {
width: 275px;
height: 275px;
transform: translateY(-25px);
transition: 0.5s;
}
.content {
width: 100%;
position: absolute;
top: 60;
transform: translateY(25px);
text-align: center;
color: white;
}
.content h1 {
font-size: 70px;
margin-top: 60px;
}
.content p {
margin: 20px auto;
font-weight: 100;
line-height: 25px;
}
button {
width: 200px;
padding: 15px 0;
text-align: center;
margin: 20px 10px;
border-radius: 25px;
font-weight: bold;
border: 2px solid #009688;
background: transparent;
color: white;
cursor: pointer;
position: relative;
overflow: hidden;
}
span {
background: #009688;
height: 100%;
width: 0;
border-radius: 25px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
transition: 0.5s;
}
button:hover span {
width: 100%;
}
button:hover {
border: none
}
.text-box {
height: 600px;
border: 3px;
border-style: none;
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(500px);
display: flex;
justify-content: space-around;
}
.images-box1 {
background-color: rgba(68, 218, 185, 0.05);
border-radius: 77px;
width: 375px;
height: 628px;
border: 5px;
border-color: #1f534f;
border-style: solid none;
align-items: center;
cursor: pointer;
z-index: -1;
transition: 0.7s;
}
.images-box1:hover {
background: rgb(152, 152, 152);
background: linear-gradient(3deg, rgba(152, 152, 152, 0) 0%, rgba(255, 255, 255, 0.3113620448179272) 100%);
height: 300px;
margin-top: 20px;
background: #009688;
transition: 0.7s;
}
.text-image {
border-radius: 75px;
width: 375px;
height: 300px;
display: flex;
justify-content: left;
align-items: center;
flex-direction: column;
object-fit: cover;
object-position: middle;
}
.text-title-box1 {
text-align: start;
margin-top: 10px;
text-align: center;
}
p {
padding-top: 20px;
transition: 0.5s;
}
p:hover {
transition: 0.5s;
}
.bottom-parent {
position: relative;
}
.bottom {
display: block;
width: 100%;
/* position: absolute; */
bottom: 0;
height: 45px;
background-color: rgb(21, 105, 87);
}
.text-bottom {
display: flex;
justify-content: center;
text-indent: 20px;
padding-right: 20px;
padding-top: 13px;
color: white;
}
.twitter-hover {
text-decoration: none;
color: white;
}
.twitter-hover:hover {
text-decoration: underline;
color: rgba(255, 255, 255, 0.685);
}
.linkedin-hover {
text-decoration: none;
color: white;
}
.linkedin-hover:hover {
text-decoration: underline;
color: rgba(255, 255, 255, 0.685);
}
.instagram-hover {
text-decoration: none;
color: white;
}
.instagram-hover:hover {
text-decoration: underline;
color: rgba(255, 255, 255, 0.685);
}
.impressum:hover {
cursor: pointer;
text-decoration: underline;
color: rgba(255, 255, 255, 0.685);
}
.roadmap-box {
width: 100%;
height: 50px;
background-color: white;
display: none;
/*transform: translateY(-500px);*/
}
<div class="banner">
<div class="navbar">
<img class="profile-signature" src="Logo/logo-1.png" alt="Profile Logo">
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>GAMES</li>
<li>SOCIALS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="content">
<a href="https://google.com/" target="_blank">
<img class="profile-picture" src="Logo/logo-2.jpg" alt="Profile Picture">
</a>
<h1>WELCOME TO PARADISE!</h1>
<p>This is a practice website. There's just a bit of text here to fill the lines, blah blah blah.
<br>If you want to know more about me, just have a look around
</p>
<div>
<a href="https://google.com/" target="_blank">
<button type="button" href="#middle"><span></span>PORTFOLIO</button>
</a>
<a href="https://twitter.com/" target="_blank">
<button type="button"><span></span>SOCIALS</button>
</a>
</div>
<div class="text-box">
<div class="images-box1">
<img src="designs/1.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Random Design 1</h1>
<p></p>
</div>
</div>
<div class="images-box1">
<img src="designs/2.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Fantasy Shower</h1>
<p>Well, nothing much to explain here. <br> <br> I need some text so have run reading <br> blah blah blah again <br> <br>:)</p>
</div>
</div>
<div class="images-box1">
<img src="designs/3.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Light Bulb Girl</h1>
<p>This image was created 2020. <br> It shows a person beeing stuck inside a lightbulb. Funny right? No deeper <br> intentions, dont look for them, <br> lol</p>
</div>
</div>
<div class="images-box1">
<img src="designs/4.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Random Design 4</h1>
<p>Test</p>
</div>
</div>
</div>
</div>
</div>
<div class="code-image-box">
<div class="code-image">
</div>
</div>
<div class="roadmap-box">
<div class="q1"></div>
<div class="q2"></div>
</div>
<div class="bottom-parent">
<div class="bottom">
<div class="text-bottom">
<a class="twitter-hover" href="https:/twitter.com/" target="_blank">
<div class="twitter">Twitter</div>
</a>
<a class="linkedin-hover" href="https:/linkedin.com/" target="_blank">
<div class="linkedin">LinkedIn</div>
</a>
<a class="instagram-hover" href="https:/instagram.com/" target="_blank">
<div class="instagram">Instagram</div>
</a>
<div class="impressum">Impressum</div>
</a>
</div>
</div>
</div>