Html 导航栏+；2根全高立柱+；带Flexbox的页脚

由此产生的每个问题都已得到解决：

• 如何在Flexbox中放置导航栏
• 如何在Flexbox中放置两个全高柱
• 如何放置只显示在列末尾的页脚

但是我不能同时做这三件事

我想要的是：

如果文本较少，则两列将展开，但页脚仍保留在底部。 不显示滚动条

+------------------------------+   
|            NAVBAR            |    
|-------------+-+------------+-|
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
|| blah blah  | | blah blah  | |
||            | | blah blah  | |
||            | | blah blah  | |
||            | |            | |
||            | |            | |
||            | |            | |
||            | |            | |
||            | |            | |
+------------------------------+   
|           FOOTER             |    
<========END OF SCREEN=========>

你好，世界！








搜寻
你好，世界！
知识是一种美德，是一种美德，是一种美德，是一种美德。利奥·阿利奎姆。在临时通信会议上发表演讲。奥古斯特·埃吉特·阿库名言中的封建维瓦摩斯。Amet Concetetur Adipising Elite duis tristique
我的ipsum faucibus vitae aliquet nec。枕叶元素的直径。坐在阿梅特·里索斯·纳勒姆·埃吉特·菲利斯·埃吉特·努克·洛博蒂斯·马蒂斯身边。整数malesuada nunc vel risus commodo。这是一个完整的枕叶元素。我要和你谈谈你的想法。苏打水和苏打水一起喝。交流或交流相位
我是你的脚。始终位于屏幕底部。当页面内容太高时，我会被按下。我也会根据我的内容调整我的高度。

尝试了以下操作：

html, body, main
{
  height: 100%;
}
footer {
  background-color: #eee;
  position:fixed;
  bottom:0;
  width:100%;
display:block;
}
.container{ 
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -120px;
}

正文{
显示器：flex；
弯曲方向：立柱；
保证金：0；
最小高度：100vh；
}
html，主体，主体
{
身高：100%；
}
.容器{
宽度：100%；
溢出：自动；
身高：100%；
边缘底部：-120px；
}
标题，
页脚{
flex-grow:0；
}
主要{
柔性生长：1；
}
页脚{
背景色：#eee；
位置：固定；
底部：0；
宽度：100%；
显示：块；
}
#红色的{
背景色：红色；
}
#蓝色的{
背景颜色：蓝色；
}

你好，世界！








搜寻
你好，世界！
知识是一种美德，是一种美德，是一种美德，是一种美德。利奥·阿利奎姆。在临时通信会议上发表演讲。奥古斯特·埃吉特·阿库名言中的封建维瓦摩斯。阿梅特·康塞特图
迪伊斯·特里斯蒂克精英酒店
我的ipsum faucibus vitae aliquet nec。枕叶元素的直径。坐在阿梅特·里索斯·纳勒姆·埃吉特·菲利斯·埃吉特·努克·洛博蒂斯·马蒂斯身边。整数malesuada nunc vel risus commodo。这是一个完整的枕叶元素。中间身份证
维利特·拉奥里特，我不知道该怎么做。苏打水和苏打水一起喝。交流或交流相位
我是你的脚。始终位于屏幕底部。当页面内容太高时，我会被按下。我也会根据我的内容调整我的高度。

在主容器和行上继续执行

flex grow

<main role="main" class="d-flex">
    <div class="container d-flex flex-column flex-grow-1">
        <h1>Hello, world!</h1>
        <div class="row flex-grow-1">
            <div class="col" id="red">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique
            </div>
            <div class="col" id="blue">
                <p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus
            </div>
        </div>
    </div>
</main>

你好，世界！
知识是一种美德，是一种美德，是一种美德，是一种美德。利奥·阿利奎姆。在临时通信会议上发表演讲。奥古斯特·埃吉特·阿库名言中的封建维瓦摩斯。Amet Concetetur Adipising Elite duis tristique
我的ipsum faucibus vitae aliquet nec。枕叶元素的直径。坐在阿梅特·里索斯·纳勒姆·埃吉特·菲利斯·埃吉特·努克·洛博蒂斯·马蒂斯身边。整数malesuada nunc vel risus commodo。这是一个完整的枕叶元素。我要和你谈谈你的想法。苏打水和苏打水一起喝。交流或交流相位

演示：

---

相关：

添加了解决方案@thephithanks！但是如果我在代码段上进入“完整页面”，蓝色和红色列直到底部才会展开。添加了

.container

css和其他正文，页脚cssBlue和红色列在代码段的“完整页面”上仍然没有展开。我不希望列和页脚之间有空格，没有空格。

html, body, main
{
  height: 100%;
}
footer {
  background-color: #eee;
  position:fixed;
  bottom:0;
  width:100%;
display:block;
}
.container{ 
  width: 100%;
  overflow: auto;
  height: 100%;
  margin-bottom: -120px;
}

<main role="main" class="d-flex">
    <div class="container d-flex flex-column flex-grow-1">
        <h1>Hello, world!</h1>
        <div class="row flex-grow-1">
            <div class="col" id="red">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique
            </div>
            <div class="col" id="blue">
                <p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus
            </div>
        </div>
    </div>
</main>