如何使引导卡拉伸到列内的屏幕高度？

Posted 2023-03-06

【中文标题】如何使引导卡拉伸到列内的屏幕高度？

【英文标题】：How to make Bootstrap card stretch to screen height inside a column?

【发布时间】：2021-03-16 18:45:50

【问题描述】：

我在 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 现在的样子：

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

【参考方案1】：

在您的 Container、Row、Col md=4 和 Card 中 - 添加 className="h-100" 这会将 Col 和 Card 的高度增加到 100vh - 59px

然后您可以添加overflow-y: auto 或在Card 上添加className（引导样式）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);

【讨论】：

不幸的是它没有改变任何东西。检查我添加的沙盒链接。

在你的沙盒中你没有修改任何东西。另外，我在移动设备上，所以我无法获得您想要的实际视图。

您需要为Col 和Card 加上h-100 加 - 一个额外的overflow-auto 为Card

我第一次把代码改成你编辑前说的，没用。现在我将您的更改应用到沙盒，但仍然无法正常工作。

嗯...这很奇怪。我确信它会起作用。

【参考方案2】：

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

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

无论这些更改如何，您的 CSS 看起来都应该保持在中间。

【讨论】：

我将h-100 添加到我想拉伸的列中，但没有任何反应。检查检查元素，它和行一样高。如果我也拉伸该行，则右侧卡片不再居中。

如果该行是弹性行，您可以忘记列上的height 属性，只需在要扩展的列上使用align-self: stretch;，在您希望的列上使用align-self: center;居中。 （保持行与（高度：100%，尽管如此））。

【参考方案3】：

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

【讨论】：

这不起作用。卡片确实变长了，但它与我的浏览器窗口高度相同，因此溢出了我的 div 并覆盖了我将添加到容器底部的任何填充。

【参考方案4】：

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

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

【讨论】：

你可能需要稍微改变你的结构，但它可以与这种组合一起工作。

【参考方案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