如何隐藏父容器垂直滚动条并让子容器占剩余高度滚动？

方法1：JavaScript动态计算高度（无父容器修改需求，适配所有场景） #

通过JS实时计算子容器的可用垂直空间，精准适配父容器剩余高度：

React代码实现 #

import { useEffect, useRef } from 'react';

const ParentComponent = () => {
  const parentRef = useRef(null);
  const headerRef = useRef(null);
  const childRef = useRef(null);

  const adjustChildHeight = () => {
    if (!parentRef.current || !headerRef.current || !childRef.current) return;
    
    // 获取父容器内部可用高度
    const parentInnerHeight = parentRef.current.clientHeight;
    // 计算标题元素的总占用高度（含margin）
    const headerRect = headerRef.current.getBoundingClientRect();
    const headerTotalHeight = headerRect.bottom - headerRect.top;
    
    // 扣除子容器自身的margin（若有）
    const childStyle = window.getComputedStyle(childRef.current);
    const childMargin = parseFloat(childStyle.marginTop) + parseFloat(childStyle.marginBottom) || 0;
    
    childRef.current.style.height = `${parentInnerHeight - headerTotalHeight - childMargin}px`;
  };

  useEffect(() => {
    // 初始化计算
    adjustChildHeight();
    // 监听窗口尺寸变化
    window.addEventListener('resize', adjustChildHeight);
    // 监听父容器和标题的尺寸变化
    const observer = new ResizeObserver(adjustChildHeight);
    observer.observe(parentRef.current);
    observer.observe(headerRef.current);

    return () => {
      window.removeEventListener('resize', adjustChildHeight);
      observer.disconnect();
    };
  }, []);

  return (
    <div id="parent" ref={parentRef} style={{ overflow: 'auto' }}>
      <h1 ref={headerRef}>Hello world</h1>
      <div 
        id="child" 
        ref={childRef} 
        style={{ overflowY: 'auto' }}
      >
        <div style={{ height: '1200px', backgroundColor: 'green' }}></div>
      </div>
    </div>
  );
};

export default ParentComponent;

方法2：CSS Grid（允许给父容器添加类时使用） #

通过Grid布局自动分配空间，让子容器占满剩余高度：

步骤 #

1. 给父容器添加自定义类.parent-grid
2. 编写CSS：

.parent-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%; /* 确保父容器占满可用高度 */
}

#child {
  overflow-y: auto;
}

React代码示例 #

<div id="parent" className="parent-grid" style={{ overflow: 'auto' }}>
  <h1>Hello world</h1>
  <div id="child" style={{ overflowY: 'auto' }}>
    <div style={{ height: '1200px', backgroundColor: 'green' }}></div>
  </div>
</div>

方法3：CSS Flexbox（允许修改父容器布局属性时使用） #

用Flex布局让子容器自动填充剩余空间：

CSS代码 #

.parent-flex {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#child {
  flex: 1;
  overflow-y: auto;
}

说明 #

• 方法1完全无需修改父容器，适合严格限制父容器代码的场景
• 方法2、3依赖CSS布局特性，代码更简洁，但需要调整父容器的样式类或布局属性

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