Footer at bottom of page OR below content, whichever is lower - html

Question

I have looked and looked, and can't find a solution to this that works (have tried LOTS!). I have a fixed header, and two columns that I want to expand with content, but want to appear full height if low on content. Then a footer that I want to appear either below the content (when lots) or at the bottom of the page. With the below HTML/CSS, the footer appears just off the viewscreen, but even worse, for some reason if I have enough text to push off the screen, my footer disappears!!
Edited: I figured it out. Yay!! on to next step.
HTML - EDITED
<header>
<div class="fixed-top">
<div style="height: 10px; background: #27AAE1;"></div>
<div id="Top_Bar" class="row">
<div class="col-sm-2">
<a><img src="images/nmdlogo.png" height=80px;></a>
</div>
<div class="col-sm-10">
<h1 "text-align=center";>Admin Panel</h1>
</div>
</div>
<div style="height: 10px; background: #27AAE1;"></div>
</div>
</header>
<main class="Site-content">
<div class="container-fluid h-100">
<div class="row h-100">
<div id="Menu_Panel" class="col-sm-2"><!-- Left Side Menu Area -->
Menu
</div><!-- End of col-sm-2 Left Side Menu Area -->
<div id="Main_Panel" class="col-sm-10"><!-- Main Area -->
Main Panel<br>
</div><!-- End col-sm-10 Main Area -->
</div><!-- End of Row -->
</div><!-- End of Container -->
</main>
<footer>
<div class="customHr"></div>
<div class="col-sm-10 offset-sm-2">
<span>Text Here</span><br>
<a style="color: white; text-decoration: none; cursor: pointer; font-weight: bold;" href="#">Link Name</a>
</div>
<div class="customHr"></div>
<div style="height: 10px; background: #27AAE1;"></div>
</footer>
CSS - EDITED
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: #2f4050;
}
.Site-content {
flex: 1;
margin-top: 120px;
}
#Menu_Panel{
background-color: #d10e1e;
}
#Main_Panel{
background-color: #ffffff;
}
#Top_Bar{
text-align: center;
color:#ffffff;
img-align: center;
background-color: #2f4050;
padding-top: 10px;
padding-bottom: 10px;
}
footer {
color:#ffffff;
text-align: center;
}
.customHr {
border-bottom: 1px solid #9fb1c2;
margin-top: 10px;
margin-bottom: 10px;
font-size: .8em;
padding-top: 5x;
padding-bottom: 5px;
}

Answer 1

I imagine you're looking for a footer that sticks to the bottom of your page than?
Edited:
Following css (based on your original) should give you what you're looking for
* {
margin: 0;
}
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #2f4050;
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
}
#Menu_Panel {
background-color: #d10e1e;
margin-top: 120px;
}
#Main_Panel {
background-color: #ffffff;
margin-top: 120px;
}
#Fixed_Top {
position: fixed; /* Set the navbar to fixed position */
top: 0;
}
#Top_Bar {
text-align: center;
color: #ffffff;
img-align: center;
background-color: #2f4050;
padding-top: 10px;
padding-bottom: 10px;
}
.footer {
color: #ffffff;
text-align: center;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
.customHr {
border-bottom: 1px solid #9fb1c2;
margin-top: 10px;
margin-bottom: 10px;
font-size: .8em;
padding-top: 5x;
padding-bottom: 5px;
}