使 Trello 卡片列表滚动
Make Trello list of cards scroll
我正在尝试在 HTML 页面中重建 Trello 列表。除了一个小问题，我几乎完成了。这是我的代码：
* {
font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
}
#main {
text-align: center;
padding: 10px;
}
.list {
margin: 5px;
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
display: inline-block;
max-height: 440px;
max-width: 240px;
padding: 4px 4px 0px;
background-color: rgb(226, 228, 230);
}
.list-header {
padding: 8px 4px;
position: relative;
min-height: 19px;
display: block;
line-height: 18px;
text-align: left;
}
.list-title {
cursor: pointer;
display: inline;
font-size: 15px;
font-weight: bold;
line-height: 18px;
margin: 0px;
min-height: 19px;
min-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
color: rgb(77, 77, 77);
}
.card-list {
overflow-y: auto;
overflow-x: visible;
}
.card {
overflow: auto;
padding: 6px 8px 4px;
margin-bottom: 4px;
position: relative;
display: block;
cursor: pointer;
color: rgb(77, 77, 77);
font-size: 14px;
line-height: 18px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
width: 214px;
text-align: left;
background-color: rgb(255, 255, 255);
}
.card-title {
color: rgb(77, 77, 77);
clear: both;
display: block;
font-weight: 400;
margin: 0px 0px 4px;
overflow: hidden;
text-decoration: none;
word-wrap: break-word;
background-color: transparent;
}
<p>List of cards that overflow</p>
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
<div class="card"><a class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a></div>
<div class="card"><a class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"><a class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a></div>
<div class="card"><a class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a></div>
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
<div class="card"><a class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a></div>
<div class="card"><a class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a></div>
<div class="card"><a class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a></div>
<div class="card"><a class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a></div>
</div>
</div>
</div>
<p>List of cards that does not overflow</p>
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
</div>
</div>
</div>
正如您从 运行 代码片段中看到的那样，卡片溢出了列表。
我已将列表的 max-height 设置为 440px。这是我对包含一叠卡片的 div 的设置：
.card-list {
overflow-y: auto;
overflow-x: visible;
}
我想要<div class="card-list">里面的卡片卷轴。我想要 只有 垂直滚动条 而滚动条不会遮挡卡片 。这是我想要的结果：
但我不希望滚动条或其他 space 出现在卡片数量较少的列表中：
我只是不知道该怎么做。如何让卡片堆在容器内滚动？
您还需要为 child 元素设置 max-height。如果只想显示垂直滚动条，请增加容器的宽度以占据全文。
.list {
max-height: 450px; /* To allow the boxes to be seen completely */
width: auto; /* Rearrange the width when there is no scroll bar */
}
.card-list {
max-height: 410px; /* To initiate vertical scroll bar */
overflow-x: visible;
overflow-y: auto;
}
.list {
width: auto; /* To remove Horizontal scroll bar */
}
#main {
text-align: center;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
}
.list {
margin: 5px;
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
display: inline-block;
max-height: 450px;
width: auto;
padding: 4px 4px 0px;
background-color: rgb(226, 228, 230);
}
.list-header {
padding: 8px 4px;
position: relative;
min-height: 19px;
display: block;
line-height: 18px;
text-align: left;
}
.list-title {
cursor: pointer;
display: inline;
font-size: 15px;
font-weight: bold;
line-height: 18px;
margin: 0px;
min-height: 19px;
min-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
color: rgb(77, 77, 77);
}
.card-list {
overflow-y: auto;
overflow-x: visible;
max-height: 410px;
}
.card {
overflow: auto;
padding: 6px 8px 4px;
margin-bottom: 4px;
position: relative;
display: block;
cursor: pointer;
color: rgb(77, 77, 77);
font-size: 14px;
line-height: 18px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
width: auto;
max-width: 220px;
text-align: left;
background-color: rgb(255, 255, 255);
}
.card-title {
color: rgb(77, 77, 77);
clear: both;
display: block;
font-weight: 400;
margin: 0px 0px 4px;
overflow: hidden;
text-decoration: none;
word-wrap: break-word;
background-color: transparent;
}
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"> <a href="" target="_blank" class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a>
</div>
</div>
</div>
</div>
我正在尝试在 HTML 页面中重建 Trello 列表。除了一个小问题，我几乎完成了。这是我的代码：
* {
font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
}
#main {
text-align: center;
padding: 10px;
}
.list {
margin: 5px;
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
display: inline-block;
max-height: 440px;
max-width: 240px;
padding: 4px 4px 0px;
background-color: rgb(226, 228, 230);
}
.list-header {
padding: 8px 4px;
position: relative;
min-height: 19px;
display: block;
line-height: 18px;
text-align: left;
}
.list-title {
cursor: pointer;
display: inline;
font-size: 15px;
font-weight: bold;
line-height: 18px;
margin: 0px;
min-height: 19px;
min-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
color: rgb(77, 77, 77);
}
.card-list {
overflow-y: auto;
overflow-x: visible;
}
.card {
overflow: auto;
padding: 6px 8px 4px;
margin-bottom: 4px;
position: relative;
display: block;
cursor: pointer;
color: rgb(77, 77, 77);
font-size: 14px;
line-height: 18px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
width: 214px;
text-align: left;
background-color: rgb(255, 255, 255);
}
.card-title {
color: rgb(77, 77, 77);
clear: both;
display: block;
font-weight: 400;
margin: 0px 0px 4px;
overflow: hidden;
text-decoration: none;
word-wrap: break-word;
background-color: transparent;
}
<p>List of cards that overflow</p>
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
<div class="card"><a class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a></div>
<div class="card"><a class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"><a class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a></div>
<div class="card"><a class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a></div>
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
<div class="card"><a class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a></div>
<div class="card"><a class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a></div>
<div class="card"><a class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a></div>
<div class="card"><a class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a></div>
</div>
</div>
</div>
<p>List of cards that does not overflow</p>
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
</div>
</div>
</div>
正如您从 运行 代码片段中看到的那样，卡片溢出了列表。
我已将列表的 max-height 设置为 440px。这是我对包含一叠卡片的 div 的设置：
.card-list {
overflow-y: auto;
overflow-x: visible;
}
我想要<div class="card-list">里面的卡片卷轴。我想要 只有 垂直滚动条 而滚动条不会遮挡卡片 。这是我想要的结果：
但我不希望滚动条或其他 space 出现在卡片数量较少的列表中：
我只是不知道该怎么做。如何让卡片堆在容器内滚动？
您还需要为 child 元素设置 max-height。如果只想显示垂直滚动条，请增加容器的宽度以占据全文。
.list {
max-height: 450px; /* To allow the boxes to be seen completely */
width: auto; /* Rearrange the width when there is no scroll bar */
}
.card-list {
max-height: 410px; /* To initiate vertical scroll bar */
overflow-x: visible;
overflow-y: auto;
}
.list {
width: auto; /* To remove Horizontal scroll bar */
}
#main {
text-align: center;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
}
.list {
margin: 5px;
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
display: inline-block;
max-height: 450px;
width: auto;
padding: 4px 4px 0px;
background-color: rgb(226, 228, 230);
}
.list-header {
padding: 8px 4px;
position: relative;
min-height: 19px;
display: block;
line-height: 18px;
text-align: left;
}
.list-title {
cursor: pointer;
display: inline;
font-size: 15px;
font-weight: bold;
line-height: 18px;
margin: 0px;
min-height: 19px;
min-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
color: rgb(77, 77, 77);
}
.card-list {
overflow-y: auto;
overflow-x: visible;
max-height: 410px;
}
.card {
overflow: auto;
padding: 6px 8px 4px;
margin-bottom: 4px;
position: relative;
display: block;
cursor: pointer;
color: rgb(77, 77, 77);
font-size: 14px;
line-height: 18px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
width: auto;
max-width: 220px;
text-align: left;
background-color: rgb(255, 255, 255);
}
.card-title {
color: rgb(77, 77, 77);
clear: both;
display: block;
font-weight: 400;
margin: 0px 0px 4px;
overflow: hidden;
text-decoration: none;
word-wrap: break-word;
background-color: transparent;
}
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"> <a href="" target="_blank" class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a>
</div>
</div>
</div>
</div>