如何用CSS或JS设置AppContainer高度为100vh减去AppMenu高度？

嘿，这需求太常见了！我给你准备了纯CSS和JS两种实现方式，根据你的场景选就行：

一、纯CSS方案（推荐，简洁高效） #

最省心的方式是用Flexbox布局，完全不用手动计算高度，浏览器会自动帮你分配剩余空间：

修改后的CSS代码： #

.App {
  min-height: 100vh !important;
  max-height: 100vh !important;
  height: 100vh !important;
  background-color: red;
  /* 新增：设置为垂直方向的flex布局 */
  display: flex;
  flex-direction: column;
}

.AppMenu {
  background-color: blue;
  position: sticky;
  top: 0px;
  width: 100%;
  font-size: 1.3em;
  /* 菜单会自动占据自身所需高度，不用固定值 */
}

.AppContainer {
  background-color: green;
  /* 新增：让容器占满剩余所有空间 */
  flex: 1;
  /* 可选：如果内容超出，添加滚动条 */
  overflow-y: auto;
}

原理： #

把.App设为flex-direction: column的弹性容器后，内部元素会垂直排列。.AppMenu会根据自身内容占据高度，而.AppContainer的flex:1会强制它填满容器剩下的所有空间，完美适配任何菜单高度（不管是固定还是动态变化的）。

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

.AppContainer {
  background-color: green;
  height: calc(100vh - 50px);
  overflow-y: auto;
}

不过这种方式不够灵活，菜单高度变化的话就得改代码，所以还是Flexbox更推荐。

二、JS方案（适合特殊场景） #

如果因为某些原因不能用Flexbox，也可以用JS动态计算高度：

React版本示例（因为你用了className，推测是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版本： #

const menu = document.querySelector('.AppMenu');
const container = document.querySelector('.AppContainer');

function setContainerHeight() {
  const menuHeight = menu.offsetHeight;
  container.style.height = `calc(100vh - ${menuHeight}px)`;
}

// 初始化
setContainerHeight();
// 监听窗口 resize
window.addEventListener('resize', setContainerHeight);

原理： #

通过offsetHeight获取菜单的实际高度，然后用calc()计算容器的高度，同时监听窗口resize事件，确保窗口变化时高度也能实时更新。

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