移动端如何动态设置Box Container高度并实现溢出滚动？

方法1：Flexbox 布局（推荐，纯CSS自动适配） #

利用Flex布局的flex: 1属性让容器自动填充剩余空间，无需手动计算高度，同时设置滚动属性实现内容溢出时滚动。

修改后代码 #

HTML（结构保留，给其他内容加类名方便控制）

<div className="App">
  <header>this is header</header>
  <div class="other-content">.... 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>

CSS

/* 全局重置默认边距，避免布局偏移 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.App {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 让容器占满视口最小高度 */
}

/* 保持固定定位，加背景色防止内容穿透 */
header, footer {
  position: fixed;
  width: 100%;
  height: 100px;
  background: #ffffff;
}

header { top: 0; }
footer { bottom: 0; }

/* 给中间区域加padding，避开固定的头尾，防止内容被遮挡 */
.App > div:not(.boxContainer) {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* 其他内容的样式，高度由自身内容决定 */
.other-content {
  height: 200px;
}

.boxContainer {
  flex: 1; /* 自动填充剩余空间 */
  overflow-y: auto; /* 内容超出时垂直滚动 */
  /* 移除固定height */
}

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

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

方法2：CSS Grid 布局（纯CSS方案） #

通过Grid的行列分配，让中间区域自动占据剩余空间，实现同样效果。

核心CSS修改 #

.App {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 头尾自动高度，中间区域填充剩余空间 */
  min-height: 100vh;
}

/* 其余样式同Flex方案中的header、footer、中间区域padding等设置 */

方法3：JavaScript 动态计算（适合复杂动态场景） #

如果页面中有动态变化的元素高度，可通过JS监听窗口resize和元素变化，实时计算容器高度。

React示例代码 #

import { useEffect, useRef } from 'react';

function App() {
  const boxContainerRef = useRef(null);
  const headerRef = useRef(null);
  const footerRef = useRef(null);
  const otherContentRef = useRef(null);

  const updateContainerHeight = () => {
    if (!boxContainerRef.current) return;
    
    const headerHeight = headerRef.current.offsetHeight;
    const footerHeight = footerRef.current.offsetHeight;
    const otherContentHeight = otherContentRef.current?.offsetHeight || 0;
    const viewportHeight = window.innerHeight;
    
    // 计算剩余可用高度
    const availableHeight = viewportHeight - headerHeight - footerHeight - otherContentHeight;
    boxContainerRef.current.style.height = `${Math.max(availableHeight, 0)}px`;
  };

  useEffect(() => {
    updateContainerHeight();
    // 监听窗口尺寸变化
    window.addEventListener('resize', updateContainerHeight);
    // 监听其他内容的动态变化（比如异步加载内容）
    const observer = new MutationObserver(updateContainerHeight);
    if (otherContentRef.current) {
      observer.observe(otherContentRef.current, { attributes: true, childList: true, subtree: true });
    }
    
    return () => {
      window.removeEventListener('resize', updateContainerHeight);
      observer.disconnect();
    };
  }, []);

  return (
    <div className="App">
      <header ref={headerRef}>this is header</header>
      <div ref={otherContentRef}>.... another content....</div>
      <div className="boxContainer" ref={boxContainerRef}>
        {/* 子元素不变 */}
      </div>
      <footer ref={footerRef}>this is footer</footer>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者erurang