Html 如何实现3行的DIV，顶行是固定大小的内容，中行是可滚动的DIV，底行是状态栏

我现在有一个3个主分区的HTML

顶部DIV（绿色）包含一个图像，旁边有文本。 我把这个DIV放在页面的中心。此DIV必须同时包含图像和文本

第二个DIV（蓝色）是可滚动的，用于显示一些可滚动的文本

第三个DIV（灰色）类似于状态栏，固定在页面底部

现在，我遇到的问题是，随着第二个DIV中可滚动文本的增加，第二个DIV中的最后一行无法看到，因为它被底部的状态栏遮住了。 可滚动文本当前包含多行“Hello world…”，最后一行是“Hello world…last”

如何更改CSS或HTML，以便第二个DIV中的最后一行不会被状态栏遮挡？如果有帮助，我可以创建并将可滚动DIV中的内容移动到状态栏上方的另一个DIV中（以便修复第二个DIV）

该解决方案需要在所有现代浏览器上运行

我摆弄了下面的链接。您可以看到“Hello world…last”行无法看到。 我需要更改什么，以便可以看到最后一行，第二个DIV可以滚动

以下是目前的情况

由ACME自豪地制造

一些标签：
一些文字

一些文本
请做点什么xxxxx YYYY


按钮1
按钮3
一些行动

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界

你好，世界。。。最后一次

没有连接。

---

您可以给第二个Div添加一个

margingbooth

或

paddingBottom

，等于状态栏的高度，因此状态栏本身或其内容将始终位于状态栏上方。

您可以在中间行的底部添加一些填充

padding-botton:30px；

只需将最后一个固定div的高度添加到第二个div的边距底部即可

#状态{
背景：#aaa；
边框顶部：实心2px#888；
垫顶：10em；
底部：0；
左：0；
保证金：0；
填充：0；
位置：固定；
宽度：100%；
//显示：无；
}
第一分区{
显示：表格单元格；
垂直对齐：中间对齐；
高度：50px；
/*边框：1px纯红*/
显示器：flex；
证明内容：中心；
}
中心2区{
显示：表格单元格；
垂直对齐：中间对齐；
高度：50px；
/*
边框：1px纯红；
显示器：flex；
*/ 
}
第一排{
保证金：0自动；
}
/*如果动态内容太大，则需要可滚动*/
.中排{
溢出y：滚动；
背景：蓝色；
弹性：1；
边缘底部：20px；
}     
.集装箱{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
左：0；
排名：0；
宽度：100%；
背景：绿色；
最大高度：100%；
}

一些头衔
由ACME自豪地制造

一些标签：
一些文字

一些文本
请做点什么xxxxx YYYY


  <div class="container">
    <div class="first-row" style="display: inline-block; ">
        <div class="first-rowx" style="display: inline-block; vertical-align: middle;">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/acme-logo-png-transparent.png" width=240 height=274 alt="img" />
        </div>

        <div style="display:inline-block; vertical-align:middle;">
            <h1 class="text-center" style="display:inline-block; vertical-align:middle;">Proudly made by ACME</h1>
        </div>

      <hr />

      <div class="center1">
        <div class="center2" >
          <label id="SomeLabel1">Some label: </label>
          <label id="SomeLabel2">Some text....</label> <br/>
          <label id="SomeLabel3">Some text </label>
          <label id="SomeLabel4">Please do something xxxxx yyyyy</label> <br/>
        </div>
      </div>

      <hr />
        
      <div class="pet-filter" style="display: flex; justify-content: center;">
        <button class="btn btn-default btn-Connect" id="btnConnect">Button1</button> &nbsp; &nbsp;
        <button class="btn btn-default" id="Name1" style="visibility:hidden;"></button> &nbsp; &nbsp;
        <button class="btn btn-default" id="Name2" >Button3</button> &nbsp; &nbsp;
        <button class="btn btn-default" style="visibility: hidden;"></button> &nbsp; &nbsp;
        <button class="btn btn-default" id="Name3" disabled>Some action</button>    
      </div>
      <hr />
    </div>

    <div class = "middle-row" id="SomePanel"> <!-- second DIV -->
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world...     <br/> 
      hello world... last<br/> 
    </div>
     <div id="status">Not connected.</div> <!-- status bar div -->

  </div>