[FIXED] How come my div element with class = "body_1"has height=0, how to align the div between footer and header?

Issue

I used the below codes to create a HTML page where I kept header and footer tags in body tag. The height of header is 16% and footer is 5%. Now I inserted a div tag in body and gave a height of 79%(100-16-5%) but when I ran the code the height of the div tag is zero, why is it and how to align the div tag between header and footer.

Code:

body{
    margin: 0 0 0 0;
    background-color: #E6E6FA;
}

header{
    position: absolute;
    background-color: red;
    height: 16%;
    width: 100%;
    margin-bottom: 5px;
    top: 0;


} 

.logo{
    position:absolute;
    background-color:#4CD4CB;
    height:100%;
    width: 10%;

}
#head_img{
    width: 120px;
    height: 120px;
    display: block;
    margin-left: auto;
    margin-right: auto;
} 
.hd_div{
    position:absolute;
    height:40px;
    width: 90%;
    right:0;
    overflow: hidden;
}
#hd_div1{
    background-color: red;
    top: 0;
}
#hd_div2{
    background-color: white;
    top: 33.3333%;
    text-align: center;
}
#hd_div3{
    background-color: red;
    top: 66.6666%;

}
.body_1{
    background-color:blueviolet;
    height: 79%

}


footer{
    background-color: red;
    position: absolute;
    height:5%;
    width: 100%;
    bottom: 0;
}

<header>
    <div id='hd_div1' class='hd_div'></div>
    <div id='hd_div2' class='hd_div'>Hello This a test text </div>
    <div id='hd_div3' class='hd_div'></div>
    <div class='logo'>
        <img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
    </div>
</header>
<div class='body_1'></div>
<footer>
    <div id='foot1'></div>
</footer>

Image:

Solution

.body_1 has hight 0 because you body has height 0. Both header and footer are positioned absolutely which ignores body in this case.

Simple solution will be to tell body to have a height of 100vh (whole window height) but you will have to apply margin from top to .body_1 so it will not be placed under header Using position: absolute when it is not necessary is overall a bad approach to problem.

A god solution will be to set body to display: grid which has been created for this type of job.

more about grid

In this snipper I have added grid to body element and removed heights from header, .body_1 and footer (their height is now set with grid-template-rows so there is no point to set them in those elements).

body{
    margin: 0 0 0 0;
    background-color: #E6E6FA;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 16% auto 5%;
    height: 100vh;
}

header{
    background-color: red;
    width: 100%;
    position: relative;
}

.body_1{
    background-color:blueviolet;
}

footer{
    background-color: red;
    width: 100%;
}


 
.logo{
    position:absolute;
    background-color:#4CD4CB;
    height:100%;
    width: 10%;
}

#head_img{
    width: 120px;
    height: 120px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.hd_div{
    position:absolute;
    height:40px;
    width: 90%;
    right:0;
    overflow: hidden;
}

#hd_div1{
    background-color: red;
    top: 0;
}

#hd_div2{
    background-color: white;
    top: 33.3333%;
    text-align: center;
}

#hd_div3{
    background-color: red;
    top: 66.6666%;

}

<header>
    <div id='hd_div1' class='hd_div'> </div>
    <div id='hd_div2' class='hd_div'>Hello This a test text </div>
    <div id='hd_div3' class='hd_div'></div>
    <div class='logo'>
        <img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
    </div>
</header>
<div class='body_1'></div>
<footer>
    <div id='foot1'></div>
</footer>

Answered By - ciekals11

Answer Checked By - Terry (PHPFixing Volunteer)