Footer taking up alot of blank space when at the bottom of page [duplicate] - html

Question

This question already has answers here:
Footer at bottom of page or content, whichever is lower
(5 answers)
Closed last year.
I'm trying to make a website where I have a footer at the bottom of the page. I found another solution on how to place the footer at the bottom of the page online which worked amazing with no problems.
But when I tried making the website responsive I recognized that for some reason the footer took up a lot of space which created a lot of blank space between the main content and the footer. I've tried to remove the blank space, but that just results in a bunch of other problems.
Preferably I would want to remove the blank space and have the footer right under the main content of the page. Any help or advice would be appreciated!
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
#font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
#media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
#media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
#media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
#media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html>

Answer 1

The best solution would be to remove the flex from the body element & instead set the flex properties on the container. With your current structure, you can fix this by adding the following CSS to footer.
footer {
width: 100vw;
position: fixed;
bottom: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
#font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
position: fixed;
width: 100vw;
bottom: 0;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
#media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
#media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
#media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
#media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html
EDIT ~ OP want's container to be 100vh, use position: fixed; instead.

Answer 2

You can add this code to .pic:last-child:
.pic:last-child {
margin-bottom: -70px;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
#font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic:last-child {
margin-bottom: -70px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
#media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
#media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
#media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
#media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html>