css - 盒子应该是垂直薄的，没有足够的内容，但是当内容太多时会有滚动条

问题描述

在我正在合作的项目中（使用 Bootstrap 4），我想创建一个在内容过多时会有滚动条的框，如下所示：

但是当里面只有很少的子弹时，它会缩小到适当的高度，不像我们现在的那样（只是我想摆脱那个垂直的未使用的空白空间）：

我现在使用的 HTML 是：

    <div class="col-sm-3">
      <h2>Domains (258)</h2>
      <ul class="overflow-auto domain-list">
        <li><a href="...">1bh3A00</a></li>
        [...]
        <li><a href="...">8prnA00</a></li>
      </ul>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <a href="....csv"><button class="btn"><i class="fa fa-download"></i> Domains CSV</button></a>

CSS仅是：

.domain-list { height: 30em; }

我想我遗漏了一些明显的东西，但无法谷歌搜索任何有用的东西。请问有什么想法吗？

标签： cssbootstrap-4

您可以通过max-height在容器上应用而不是指定高度来实现此目的。这将使容器根据需要占用尽可能多的高度，但不超过指定的最大值。您可以在下面找到一个简单的示例，在添加第 7 行后，容器应该可以滚动，因为其中的内容比允许的要多max-height。

let rowNumber = 2;

document.getElementById('add').addEventListener('click', function() {
  const newRow = document.createElement('div');
  newRow.classList.add('row');
  newRow.innerText = `Row #${rowNumber++}`;

  document.getElementById('list').appendChild(newRow);
});

.list {
  max-height: 120px;
  background-color: red;
  overflow-y: auto;
}

.row {
  height: 20px;
  line-height: 20px; /* this is not needed, just makes the example text aligned */
  background-color: #ccc;
}

.row:nth-child(even) {
  background: rgb(15, 156, 250);
}

<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <div id="list" class="list">
    <div class="row">Row #1</div>
  </div>
  <hr />
  <button id="add">Add row</button>
  <script src="script.js"></script>
</body>

</html>

css - 盒子应该是垂直薄的，没有足够的内容，但是当内容太多时会有滚动条

问题描述

解决方案

推荐阅读