I am making an Article Based Website But getting A White space at bottom of
here is the Problem
See At the bottom Footer lorem line.
Here is the code can anyone solve it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="scss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
<header>
<div class="con1">
<img src="https://lh3.googleusercontent.com/a/AAcHTtexpBPyQQMZKXRYF3APKZhGsVounjRCydXqOYv-ij6fCVo=s96-c-rg-br100"
alt="">
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
<div class="con2">
<div class="ham_burger">
<i class="fa-solid fa-bars"></i>
</div>
</div>
</header>
<div class="maincontent">
<div class="leftside">
<h1>
Hello,
</h1>
<h2>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem voluptatibus ut tempora voluptates dolorem perspiciatis dolor eum excepturi porro, ullam, nesciunt veritatis tenetur, cupiditate quidem.
</h2>
</div>
<div class="rightside">
<img src="https://jamesclear.com/wp-content/uploads/2023/05/atomic-habits-full-dots.png" alt="">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</div>
<footer>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque numquam necessitatibus asperiores unde enim rerum, ipsam, voluptas quibusdam non vitae consectetur sequi molestiae!
</footer>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500&family=Poppins:wght@300&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}
html {
height: 100%;
width: 100%;
}
body {
min-height: 100%;
}
header {
position: relative;
display: flex;
height: 91px;
}
a {
font-size: medium;
text-decoration: none;
font-family: "Maven Pro", sans-serif;
color: black;
}
.con1 {
z-index: 1;
display: flex;
background-color: white;
height: inherit;
justify-content: flex-start;
align-items: center;
width: 50%;
gap: 3vw;
padding-left: 6vw;
}
.con1 img {
height: 47px;
}
.con2 {
display: flex;
justify-content: flex-end;
height: inherit;
background-color: white;
padding-right: 6vw;
align-items: center;
width: 50%;
}
nav {
display: flex;
gap: 3vw;
}
.maincontent {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.leftside {
background-color: red;
display: flex;
flex-direction: column;
width: 50%;
padding-left: 6vw;
padding-top: 8vh;
}
.rightside {
padding-top: 8vh;
background-color: yellow;
display: flex;
flex-direction: column;
width: 50%;
align-items: center;
}
.rightside img {
width: 37vw;
height: auto;
}
@media screen and (max-width: 500px) {
.maincontent {
display: flex;
flex-direction: column;
}
.leftside {
width: 100%;
justify-content: center;
}
.rightside {
justify-content: center;
text-align: center;
width: 100%;
height: 91 px;
padding-top: 8vh;
background-color: yellow;
display: flex;
flex-direction: column;
}
}
I have given css and html code. I have used Red border to check what is causing the problem and it seems the body is taking full length but the component left side and right side isn’t. But Cant find the solution .
2
Answers
Your body isn’t as high as you think there to begin with.
Remove width and height from
html.Make body have
min-height: 100vh, and also make it a flex container.Remove the height from
.maincontent, and addflex-grow: 1instead to allow the element to grow to fill the remaining space.The extra white space at the bottom of your body tag is due to the flex-wrap: wrap; property in . maincontent class
And in the styling of body tag,set min-height: 100% which will tell the browser to make sure that body tag is 100% tall