文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Trello-like CSS Grid-Layout:如何滚动卡片列表并显示标题和页脚

问Trello-like CSS Grid-Layout:如何滚动卡片列表并显示标题和页脚
EN

Stack Overflow用户
提问于 2020-06-22 08:36:30
回答 1查看 309关注 0票数 0

我正在尝试构建一个基于css网格布局的类似Trello的UI。我遵循了Joshua Saunders (https://medium.com/better-programming/creating-trellos-ui-with-css-grid-ed1fbfcd9448)的一个非常有用的教程，最后它还没有完成，我一整天都在寻找解决方案: Trello在调整浏览器窗口大小时，它的卡片列表有一个特定的行为:如果列表还没有到达视口的底部，"+ add card"-Button总是在列表的末尾，所有的卡片都是可见的。如果卡列表对于视口来说太长，那么在视口的底部仍然可以看到"+ add card"-button，但是标题和"+ add card"-button之间的卡列表将变为可滚动。

总而言之:在任何视窗大小下，标题和每个列表的"+ add card"-button将始终可见，如果需要，卡片列表本身将变为可滚动。我想，我找到了一个使用flex布局的解决方案(还没有尝试过)，但我仍然在想，是否可以使用网格布局。

以下是我的代码：

​

代码语言：javascript
复制
BODY {
    margin:0px;
    padding:0px;
}
.base {
    height: 100vh;
    width: 100vw;
    background-color: rgb(0, 121, 191);
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Droid Sans,Helvetica Neue,sans-serif;
    font-size: 14px;
    display: grid;
    grid-template-rows: max-content auto;
    grid-gap: 10px;
}
.header {
    padding:5px;
    color:white;
    font-size:18px;
    font-weight:bold;
}
.board {
    margin:5px;
    height:auto;
    display:grid;
    grid-template-columns:max-content;
    overflow:auto;
    grid-auto-flow:column;
    border: 1px solid yellow;
}
.lists {
    height:auto;
    display:grid;
    grid-auto-columns:272px;
    grid-auto-flow:column;
    grid-gap:8px;
    border:1px solid red;
}
.list {
    background-color:rgb(235, 236, 240);
    border-radius:3px;
    padding:10px;
    display:grid;
    grid-template-rows:max-content auto max-content;
    grid-gap:10px;
    height:max-content;
    align-items:stretch;
}
.list-title {
    font-weight:bold;
}
.list-body {
    display:grid;
    grid-auto-rows:max-content;
    grid-gap:10px;
    height:max-content;
    overflow:scroll;
}
.card {
    background-color:white;
    border-radius:3px;
    box-shadow:0 1px 0 rgba(9, 30, 66, 0.25);
    padding:10px;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>grid-layout trello-like UI - heightproblem</title>
    <link rel="stylesheet" type="text/css" href="trello-ui.css">
</head>
<body>
<div class="base">
    <div class="header">
        Header
    </div>
    <div class="board">
        <div class="lists">
        
            <div class="list">
                <div class="list-title">List 1</div>
                <div class="list-body">
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                </div><!--// list-body -->
                <div class="list-foot">+ add card</div>
            </div><!--// list -->
            
        
            <div class="list">
                <div class="list-title">List 2</div>
                <div class="list-body">
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                </div><!--// list-body -->
                <div class="list-foot">+ add card</div>
            </div><!--// list -->
            
            <div class="list">
                <div class="list-title">List 3</div>
                <div class="list-body">
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                </div><!--// list-body -->
                <div class="list-foot">+ add card</div>
            </div><!--// list -->
            
            
            <div class="list">
                <div class="list-title">List 4</div>
                <div class="list-body">
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                </div><!--// list-body -->
                <div class="list-foot">+ add card</div>
            </div><!--// list -->
            
            
            <div class="list">
                <div class="list-title">List 5</div>
                <div class="list-body">
                    <div class="card">Card</div>
                    <div class="card">Card</div>
                </div><!--// list-body -->
                <div class="list-foot">+ add card</div>
            </div><!--// list -->
            
            <div class="list">
                <div class="list-title">List 6</div>
                <div class="list-body">
                        &nbsp;
                </div><!--// list-body -->
                <div class="list-foot">+ add card</div>
            </div><!--// list -->
            
            
        </div><!--// lists
    </div>
</div>
</body>
</html>

​

css
grid-layout
trello
html
EN

回答 1

Stack Overflow用户

发布于 2020-06-22 09:05:15

使用css方法计算可用的高度，这里是它的calc()：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

以下是您当前问题的解决方案

代码语言：javascript
复制
body {
  margin: 0px;
  padding: 0px;
}

.base {
  height: 100vh;
  width: 100vw;
  background-color: rgb(0, 121, 191);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 14px;
  display: grid;
  grid-template-rows: max-content auto;
  grid-gap: 10px;
}

.header {
  padding: 5px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  height: 35px;
}

.board {
  margin: 5px;
  height: calc(100vh - 70px);
  display: grid;
  grid-template-columns: max-content;
  grid-auto-flow: column;
  border: 1px solid yellow;
  overflow-x: scroll;
  overflow-y: hidden;
}

.lists {
  display: grid;
  grid-auto-columns: 272px;
  grid-auto-flow: column;
  grid-gap: 8px;
  border: 1px solid red;
  height: calc(100vh - 90px);
}

.list {
  background-color: rgb(235, 236, 240);
  border-radius: 3px;
  padding: 10px;
  display: grid;
  grid-template-rows: max-content auto max-content;
  grid-gap: 10px;
  height: max-content;
  align-items: stretch;
  max-height: calc(100vh - 90px);
  overflow: hidden;
}

.list-title {
  font-weight: bold;
  height: 20px;
}

.list-body {
  display: grid;
  grid-auto-rows: max-content;
  grid-gap: 10px;
  overflow: scroll;
  max-height: calc(100vh - 190px);
}

.card {
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
  padding: 10px;
}

.list-foot {
  height: 35px;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62505913

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档