如何使 Bootstrap 卡片在列内拉伸到屏幕高度？

Question

我在 React 中有一个简单的网格布局，其中有 2 张卡片，每张卡片在一列中。我怎样才能让左边的卡片伸展以填充列（与屏幕一样高）并且当内容在内部扩展时，为它获取一个滚动条同时保持第二个完整（并且仍然与屏幕中间对齐）？

<header className="App-header">
  <Container>
    <Row>
      <Col md={4}>
        <Card>with text here</Card>
      </Col>
      <Col md={8} className="align-self-center">
        <Card>with other text here</Card>
      </Col>
    </Row>
  </Container>
</header>

和 css:

.App-header {
  background-color: #282c34;
  min-height: calc(100vh - 59px);
  max-height: calc(100vh - 59px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

这是 UI 现在的样子：

这里也有 codesandbox https://codesandbox.io/s/zealous-lumiere-jv0wv?file=/src/App.js

Answer 1

我相信您应该能够简单地将 height: 100% 添加到您希望扩展的列的 css，它应该会填满容器。

要仅在需要时启用滚动，请将 css 属性 overflow: auto 设置为可滚动容器。

你的 css 看起来另一张卡应该留在中间，不管这些变化如何。

Answer 2

如果要使用Bootstrap classes，则将class vh-100添加到左侧卡片。并在自定义 CSS 中添加 overflow-y : auto 以便仅在需要时滚动。

Answer 3

在您的 Container、Row、Col md={4} 和 Card 中 - 添加 className="h-100"，这将增加 Col 的并且 Card 的身高变为 100vh - 59px

然后您可以在 Card

上添加 overflow-y: auto 或添加 className（在 bootstrap 样式中）overflow-auto

要居中 Card 在 Row

上添加 className = "align-items-center"

例如：

import React from "react";
import "./App.css";
import { Card, Col, Container, Row, Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Container className="h-100">
          <Row className="h-100 align-items-center"> /* <-- put the align items here */
            <Col md={4} className="treeViewComponent h-100">
              <Card className="h-100 overflow-auto">
                <Card.Body>Text here</Card.Body>
                <Card.Footer>
                  <Button>Do stuff</Button>
                </Card.Footer>
              </Card>
            </Col>
            <Col md={8} className="compressionComponent align-items-center">
              <Card>
                <Card.Body>
                  More text here text here text here text here text here text
                  here text here text here text here text here{" "}
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </Container>
      </header>
    </div>
  );

以及 App-header

的样式

.App-header {
  background-color: #282c34;
  height: calc(100vh - 59px);
  font-size: calc(10px + 2vmin);
}

Answer 4

我看到您正在使用 flex。也许您可以使用 align-items: stretch; 定义并将 max-height 分配给您的父容器。

align-items: stretch; 使子项占据所有可用高度。
如果您限制父容器的高度，则可以将溢出应用到内部元素。

Answer 5

将 overflow-hidden、vh-100 和 mh-100 添加到左栏...

       <div className="App">
          <header className="App-header">
            <Container className="">
              <Row className="align-items-center overflow-hidden">
                <Col
                  md={4}
                  className="treeViewComponent vh-100 mh-100 overflow-hidden"
                >
                  <Card className="h-100 overflow-auto">
                    <Card.Body>Text here</Card.Body>
                    <Card.Footer>
                      <Button>Do stuff</Button>
                    </Card.Footer>
                  </Card>
                </Col>
                <Col md={8} className="compressionComponent align-items-center">
                  <Card>
                    <Card.Body>
                      More text here text here text here text here text here text
                      here text here text here text here text here{" "}
                    </Card.Body>
                  </Card>
                </Col>
              </Row>
            </Container>
          </header>
       </div>

https://codeply.com/p/vbMAhSXkLe

如何使 Bootstrap 卡片在列内拉伸到屏幕高度？

How to make Bootstrap card stretch to screen height inside a column?

html

css

react-bootstrap

bootstrap-4