如何让AppContainer高度为100vh-AppMenu高度以占满剩余空间

嘿，我来帮你搞定这个布局问题！下面是几种实用的方法，从纯CSS到JS方案都有，你可以根据自己的场景灵活选择：

方法一：Flexbox（最推荐，现代布局首选） #

Flexbox天生就适配这种「剩余空间分配」的场景，只需要调整.App的布局属性就行，完全不用硬写固定高度数值：

修改你的CSS代码：

.App {
  min-height: 100vh;
  max-height: 100vh;
  height: 100vh;
  background-color: red;
  /* 新增Flex垂直布局 */
  display: flex;
  flex-direction: column;
}

.AppMenu {
  background-color: blue;
  position: sticky;
  top: 0px;
  width: 100%;
  font-size: 1.3em;
  /* Menu会自动适配自身内容高度，无需固定height */
}

.AppContainer {
  background-color: green;
  /* 核心：让Container占满所有剩余空间 */
  flex: 1;
  /* 可选：如果Container内容过多，添加滚动条避免溢出父容器 */
  overflow: auto;
}

原理：flex-direction: column让子元素垂直排列，flex:1会告诉AppContainer自动吃掉容器里所有剩下的空间——不管AppMenu的高度是固定还是动态变化的，都能完美适配。

方法二：CSS Grid #

Grid也是现代布局的好选择，写法同样简洁直观：

修改.App的CSS：

.App {
  min-height: 100vh;
  max-height: 100vh;
  height: 100vh;
  background-color: red;
  /* 新增Grid布局 */
  display: grid;
  /* 第一行高度自适应Menu内容，第二行占满剩余空间 */
  grid-template-rows: auto 1fr;
}

.AppMenu {
  background-color: blue;
  position: sticky;
  top: 0px;
  width: 100%;
  font-size: 1.3em;
}

.AppContainer {
  background-color: green;
  /* 可选：内容溢出时自动出现滚动条 */
  overflow: auto;
}

原理：grid-template-rows: auto 1fr定义了两行布局，第一行高度由AppMenu的内容决定，第二行的1fr代表「剩余空间的1份」，自然就会占满剩下的区域。

方法三：calc()（仅适用于Menu高度固定的场景） #

如果你的AppMenu高度是固定值（比如50px），可以用calc()直接计算剩余高度：

.App {
  min-height: 100vh;
  max-height: 100vh;
  height: 100vh;
  background-color: red;
}

.AppMenu {
  background-color: blue;
  position: sticky;
  top: 0px;
  width: 100%;
  font-size: 1.3em;
  /* 假设Menu固定高度为50px */
  height: 50px;
}

.AppContainer {
  background-color: green;
  /* 直接计算100vh减去Menu的高度 */
  height: calc(100vh - 50px);
  overflow: auto;
}

⚠️ 注意：如果Menu高度是动态的（比如文字换行、响应式变化），这个方法就会失效，所以更推荐前两种纯CSS方案。

方法四：JS方案（适合特殊场景） #

如果因为某些限制必须用JS处理，可以监听元素加载和窗口变化，动态计算高度：

假设你用的是React，示例代码如下：

import { useEffect, useRef } from 'react';

function App() {
  const menuRef = useRef(null);
  const containerRef = useRef(null);

  const setContainerHeight = () => {
    if (menuRef.current && containerRef.current) {
      const menuHeight = menuRef.current.offsetHeight;
      containerRef.current.style.height = `calc(100vh - ${menuHeight}px)`;
    }
  };

  useEffect(() => {
    // 初始加载时设置高度
    setContainerHeight();
    // 窗口大小变化时重新计算
    window.addEventListener('resize', setContainerHeight);
    return () => window.removeEventListener('resize', setContainerHeight);
  }, []);

  return (
    <div className="App">
      <div className="AppMenu" ref={menuRef}>Menu</div>
      <div className="AppContainer" ref={containerRef}>Test</div>
    </div>
  );
}

原生JS的逻辑类似：获取元素的offsetHeight，然后设置Container的style.height即可。不过一般来说，能用CSS解决的问题优先用CSS，维护起来更简单省心。

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