我正在尝试使用Core UI
的react模板构建一个React仪表板。
CSS
.top-stick {
position: sticky !important;
position: -webkit-sticky;
top: 5rem;
overflow-y: auto;
height: calc(100vh - 5rem);
}
JSX
<div className="animated fadeIn">
<Row className="app-scrollable-body">
<Col xs="12" sm="4" md="3" className="top-stick">
<Card className="toic">
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
<Col xs="12" sm="8" md="9">
<Card>
<CardHeader>Card title</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
</Row>
<div className="app-fixed-footer">
<span>
<a href="https://coreui.io">CoreUI</a> © 2018
creativeLabs.
</span>
<span className="ml-auto">
Powered by{" "}
<a href="https://coreui.io/react">CoreUI for React</a>
</span>
</div>
</div>
但是在滚动时,卡片似乎无法固定。
检查 CSS 后发现 CSS 代码确实存在。并且 CSS 树中也没有 overflow: hidden 的设置。
图片链接:
![Dash](https://istack.dev59.com/2iQA2.webp)
table-responsive
中有overflow: auto
。 - Francisco Gomes