My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of responsiveness. Despite trying every possible solution, my CSS still looks messy.
*{
box-sizing: border-box;
}
html, body{
min-height: 100% !important;
height: 100%;
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #2e3e56;
background-color: whitesmoke;
width: 65%;
margin: auto;
}
/*header styling*/
#header{
text-align: center;
background-color: #2e3e56;
color: #d0cbc5;
font-size: 1.1rem;
padding: 0.3% 0% 0.3% 0%;
margin: 0;
top: 0;
}
#header table{
width: 100%;
}
#hnametd p{
margin: 0;
padding: 0;
color: white;
font-weight: bold;
}
#hnametd h1{
font-family: 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
#hlogotd{
width: 18%;
padding: 0;
}
#hlogo{
width: 100%;
float: left;
overflow: hidden;
}
/*-------*/
/*hr-area styling*/
hr{
height: 10px;
border: none;
margin: 0;
padding: 0;
}
.dblue{
background-color: #156390;
}
.lblue{
background-color: #7296ab;
}
.gray{
background-color: #d0cbc5;
}
.hrbottom{
height: 15px;
width: 100%;
}
/*-------*/
#wrapper{
height: fit-content;
width: 100%;
background-color: #2e3e56;
padding-right: 3.5%;
overflow: hidden;
}
/*sidebar styling*/
#sidebar{
float: left;
color: white;
font-size: 0.955rem;
padding: 2.2% 0 2.2% 2.2%;
max-width: 21%;
}
#sidebar ul{
list-style-type: none;
margin: 0 auto;
padding: 0;
}
.con-li{
margin: 1em 0 1em 0;
}
#sidebar h2{
font-family: 'Times New Roman', Times…