[英]How do I set a scrollable list to have a maximum size but shrink when it's not needed?
I'm working on a details page that draws data from a database.我正在处理从数据库中提取数据的详细信息页面。 The details page could have related data from two other tables, both of which might have no or many records to display.
详细信息页面可能有来自其他两个表的相关数据,这两个表可能没有或有很多记录要显示。
The basic structure looks like this (using Bootstrap):基本结构如下(使用 Bootstrap):
<div class="scrolling">
<h2>First Group of Records</h2>
<ul class="list-group">
<li class="list-group-item">
Related record details
</li>
...
</ul>
</div>
<div class="scrolling">
<h2>Second Group of Records</h2>
<ul class="list-group">
<li class="list-group-item">
Related record details
</li>
...
</ul>
</div>
The CSS for the scrolling
class is: scrolling
类的 CSS 是:
.scrolling {
height: 30%;
overflow-y: scroll
}
This works and nearly gives me what I want, but I'd like for each of the scrolling divs
to shrink if the extra space isn't needed.这有效并且几乎给了我我想要的东西,但是如果不需要额外的空间,我希望每个滚动
divs
都缩小。 How can I do that with either existing Bootstrap features or additional CSS?如何使用现有的 Bootstrap 功能或附加的 CSS 来做到这一点?
A little more Googling solved the problem.多一点谷歌搜索解决了这个问题。 This seems to work as I wanted:
这似乎像我想要的那样工作:
.scrolling {
height: 30%;
resize: both;
overflow-y: scroll;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.