使多列可滚动的布局？ CSS答案

【问题标题】：Layout making multiple columns scrollable? CSS使多列可滚动的布局？ CSS
【发布时间】：2021-02-27 11:12:01
【问题描述】：

我有以下布局：

https://codesandbox.io/s/fixed-header-antd483-forked-ub5tm?fontsize=14&hidenavigation=1&theme=dark

具有固定的标题和内容容器，高度为 100vh - 标题高度。在内容中，我有两列，我想让它们在大于其容器时可滚动。

如何在每列的固定高度内添加滚动条？

 <Layout>
    <Header style={{ position: "fixed", zIndex: 1, width: "100%" }}></Header>
    <Content
      style={{
        marginTop: 64,
        paddingTop: 8,
        height: "calc(100vh - 64px)",
        width: "100%"
      }}
    >
      <Row>
        <Col style={{ overflowY: "scroll" }} lg={6} md={9} sm={23} xs={23}>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
        </Col>
        <Col lg={18} md={16}>
          <Card
            style={{
              height: "calc(100vh - 64px)"
            }}
          >
            //super long text content
            ...
          </Card>
        </Col>
      </Row>
    </Content>
  </Layout>

【问题讨论】：

我猜你也需要链接 boostrap 吗？并且还重置了一些 CSS 规则（除非有我不知道的内置类）。可能的例子：codesandbox.io/s/fixed-header-antd483-forked-mi4wm?file=/…

标签： html css reactjs styles antd

【解决方案1】：

我不确定你对代码做了什么，但你让它变得复杂了。我简化了你的代码来实现你想要的。

为了实现想要的设计，我使用了 css-grid。

网格有 2 行，1 行用于标题，1 行用于内容。标题行高度定义为min-content，这将确保它适应保持响应所需的高度。标题本身的最小高度设置为您的64px。但是，如果由于某种原因需要更多空间，则会相应地进行调整。

然后第二行是内容。它的高度设置为auto。整个网格高度设置为100vh。因此auto 将填满所有剩余空间，而无需使用css calc function。

第二行还将overflow-y 设置为auto。如果内容高于容器，则会出现滚动条。

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: min-content auto;
  grid-column-gap: 10px;
}

body div {
  padding: 5px;
}

#header {
  grid-column: span 2;
  min-height: 64px;
}

#col-left,
#col-right {
  overflow-y: auto;
}

<body>
  <div id="header">Header</div>
  <div id="col-left">
    <Card>hello World</Card>
    <Card>hello World</Card>
    <Card>hello World</Card>
    <Card>hello World</Card>
    <Card>hello World</Card>
    <Card>hello World</Card>
    <Card>hello World</Card>
  </div>
  <div id="col-right">
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
    <p>super long text</p>
  </div>
<body>

【讨论】：