I have this very unusual block of blank space on the very bottom of my website (after the footer tag), if I inspect elements it, it seems the space is not a result of any particular div I have created. I tried playing around with the padding etc nothing seems to get it to go away.
I tried some suggested fixes online to set the HTML and body tags to have:
margin: 0;
height: 100%;
Still nothing seems to change.
@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
* {
font-family: 'Sora', sans-serif;
}
html,
body {
margin: 0;
height: 100%;
}
/* Header */
.hero {
display: block;
box-sizing: border-box;
height: 500px;
background-color: #a859f9;
clip-path: ellipse(75% 100% at 65% 0%);
}
.hero .content .title {
text-align: center;
padding: 10%;
font-size: 250%;
color: #fff;
}
/* Footer */
.footer-basic {
padding: 40px 0;
background-color: #ffffff;
color: #4b4c4d;
}
.footer-basic ul {
padding: 0;
list-style: none;
text-align: center;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
}
.footer-basic li {
padding: 0 10px;
}
.footer-basic ul a {
color: inherit;
text-decoration: none;
opacity: 0.8;
}
.footer-basic ul a:hover {
opacity: 1;
}
.footer-basic .social {
text-align: center;
padding-bottom: 10px;
}
.footer-basic .social>a {
font-size: 24px;
width: 40px;
height: 40px;
line-height: 40px;
display: inline-block;
text-align: center;
border-radius: 50%;
border: 1px solid #ccc;
margin: 0 8px;
color: inherit;
opacity: 0.75;
}
.footer-basic .social>a:hover {
opacity: 0.9;
}
.footer-basic .copyright {
margin-top: 15px;
text-align: center;
font-size: 13px;
color: #aaa;
margin-bottom: 0;
}
<!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="../static/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<title>Home</title>
</head>
<body>
<div class="hero">
<div class="content">
<div class="title">University of Lincoln <br> Review page
</div>
</div>
</div>
<div class="footer-basic">
<footer>
<div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Home</a></li>
<li class="list-inline-item"><a href="#">Services</a></li>
<li class="list-inline-item"><a href="#">About</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
</ul>
<p class="copyright">Company Name © 2018</p>
</footer>
</div>
</body>
</html>
3
Answers
It seems like you’re getting confused by the fact that the browser window is taller than the body’s content.
If you resize your window so that it’s height is less than the total height of the content and scroll to the bottom there is no gap. This effect can be seen in the fiddle you sent. Just run it and scroll to the bottom.
It seems you have set the height of the body in your CSS to 100% which just means it will expand to that percent of its parent element. Since there is not a parent of body it has no set height to expand to.
You need to set your height in div.hero to cover the entire browser height if you would like to push your footer down further. You also may want to look into using box-sizing to take the height of your footer into account to display parent and child elements that match up to the size you are trying to display your page as i.e. the browsers viewport height or whatever specific set pixel height you are trying to achieve.
Just set the padding of footer-basic to 0px.