如何为每部智能手机设置固定高度？

Question

我是一名初级前端开发人员。

页眉和页脚区域是固定的

我想动态设置“盒子容器”的高度。

如果这个动态高度高于设置的高度，我想让它滚动。

如果设备的总高度为600px，页眉和页脚的高度为100px，我想将“盒子容器”的高度设置为400px

当盒子容器的高度超过页脚元素时，我想让它滚动

 a PHONE (600px)
 ----- 
 HEADER (100px)
 -----
 
 BOXCONTAINER (SCROLL) (400px overflow scroll)

 -----
 FOOTER (100px)
 -----
 
 another page
 -----
 HEADER (100px)
 -----

 ANOTHER ELEMENT (200px)
 
 BOXCONTAINER (SCROLL overflow scroll) (200px)

 -----
 FOOTER (100px)
 -----

这是示例代码

 <div className="App">
      <header>this is header</header>
      <div>.... another content....</div>
      <div className="boxContainer">
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
        <div className="box" />
      </div>
      <footer>this is footer</footer>
    </div>

.boxContainer {
  /* how do i get the dynamic height??? */
  height: 300px; // or 200px or 500px ... 
  overflow : scroll;
}

.box {
  background-color: red;
  width: 100%;
  height: 100px;
  margin: 10px 0px;
}

.box:nth-child(2n) {
  background-color: blue;
}

我应该怎么办？

我考虑过为每个页面添加页眉和页脚区域的 px 值，减去设备的总高度，并以内联样式为内容元素提供固定高度。但是，使用这种方法，必须设置每个页面（因为除了页眉和页脚之外可能还有其他元素）。我以为这不是办法。

Answer 1

使溢出自动

.boxContainer {
  /* how do i get the dynamic height??? */
  min-height: 200px; // or 200px or 500px ... 
  max-height: 300px
  overflow : auto;
}