在引导程序中将div与页面底部对齐

我尝试使用堆栈问题中的方法，但是尽管项目非常简单，但对我没有任何帮助。

<div class="fluid-container">
    <div id="app-row" class="row">
        <div id="app" class="col-xs-5">
            <div class="top-navbar">
            Top
            </div>
            <div class="bottom-navbar">
            Bottom
            </div>
        </div>
        <div id="map-container" class="col-xs-7">
            <div id="map"></div>
        </div>
    </div>
</div>

style.css

.fluid-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

.row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    width: 100%;
}

html, body, .fluid-container, #app-row, #map-container {
    height: 100%
}

#app-row {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map-container {
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
}

#map {
    height: 100%;
    width: 100%;
}

我要实现的目标：

底部是页面的底部，顶部是页面的顶部。