页面底部或内容以下的页脚，以较低者为准

Question

我看了看，但找不到有效的解决办法（已经尝试了很多！）。我有一个固定的标题，我想用内容扩展两列，但如果内容很低，则希望显示全高。然后我想要出现在内容（批次）下方或页面底部的页脚。使用下面的HTML / CSS，页脚显示在视图屏幕之外，但更糟糕的是，由于某种原因，如果我有足够的文本来推离屏幕，我的页脚就会消失!!

编辑：我明白了。好极了！！进入下一步。

HTML - 已编辑

    <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 - 已编辑

.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

我想你正在寻找一个贴在页面底部的页脚？ 的编辑： 遵循css（基于你的原创）应该给你你想要的东西

* {
            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;
        }