时间戳

首页 > 解决方案 > 如何使 div 可滚动且高度不会导致父元素溢出？

css - 如何使 div 可滚动且高度不会导致父元素溢出？

问题描述

在我的应用程序中（使用带有 react-bootstrap v2 的 bootstrap 5.1）我有一个父 div，我应用了样式max-height:100vh;和d-flex flex-column类。这个父 div 有 2 个孩子：

  1. 一个包含导航栏的 div；
  2. 一个带类的 divcontainer-fluid and flex-grow-1

现在，如果我在容器 div 上应用样式overflow:'auto';，它将变为可滚动的。 我的目标是能够构建可以自动扩展其高度的组件，而不会导致父 div 溢出并自行滚动。

在前面的场景中，我添加max-height:100vh;并获得了固定的父高度，但我无法使用此解决方法来创建此类所需的组件。

我已经尝试将高度设置为 100%，但它导致父元素溢出。

我用我迄今为止尝试的方法做了一个简单的代码框示例。考虑作为目标让第 1 列可滚动而不滚动其他 div

标签： csstwitter-bootstrap

解决方案

如果我了解您要完成的工作，您是否希望 Container 元素根据视口高度保持在静态高度，并且组件或 div 在该约束内滚动？如果是这样，我认为这应该可行：

import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import { Container } from "react-bootstrap";
import Navigator from "./Navigator";
import Content from "./Content";

export default function App() {
  return (
    <div className="d-flex flex-column w-100" >
      <div>
        <Navigator />
      </div>
      <div>
        <Container fluid>
          <div className="d-flex" style={{ height: "85vh" }}>
            <div className="px-2" style={{ overflow: "auto" }}>
              <h5>column 1</h5>
              <Content number={15} style={{ width: 200 }}>
                <p>.....................</p>
              </Content>
            </div>
            <div>
              <h5>column 2</h5>
              <Content numeber={3} style={{ width: 200 }}>
                <p>-----------</p>
              </Content>
            </div>
          </div>
        </Container>
      </div>
      <div>
        <Navigator />
      </div>
    </div>
  );
}

我使用 85vh 作为“d-flex” div 高度作为示例，因为我不知道您为 Navigator 元素提供的高度。结果是第 1 列滚动的静态容器高度，而不是扩展包含 div 的高度。如果您没有设置导航器元素的高度，但仍希望视口显示所有元素而不滚动，您将需要使用 useEffect 查询这些元素的高度，后期绘制，并根据视口高度进行计算输出容器元素的正确高度。

推荐阅读