时间戳

首页 > 解决方案 > 在 Bootstrap 4 中添加新项目后溢出时向表添加滚动条

html - 在 Bootstrap 4 中添加新项目后溢出时向表添加滚动条

问题描述

我正在使用引导程序创建一个简单的网络应用程序，主要用于学习目的。

我已经使用 css 网格而不是使用引导网格系统创建了主布局。造成这种情况的原因之一是，当我完成 web 应用程序时，我会将它电子化以拥有一个小的桌面工具，并且我希望它始终覆盖所有视口。我不想在 webapp（正文）的顶部有滚动条。

这是简单的 CSS 网格布局。这个想法是创建类似于具有一列和两行的文件管理器的东西。在顶行中，我将显示当前文件夹中的文件，在底行中显示传输队列，用户可以在其中将文件和文件夹添加到当前路径：

body {
  margin: 0;
  padding: 0;
}

.top-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
  border-style: none;
  height: 100vh;
  width: 100vw;
}

.device-folders {
  grid-row: 1/2;
  grid-column: 1/2;
}

.queue-contents {
  grid-row: 2/3;
  grid-column: 1/2;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="site.css" crossorigin="anonymous">
  <title>Document</title>
</head>
<header>

</header>

<body>
  <div class="top-layout">
    <div class="device-folders d-flex flex-column border border-success">
      <div class="d-flex flex-row border border-primary">
        <div>
          <img src="/assets/icons/arrow-left-circle.svg" alt="" width="32" height="32" title="Bootstrap">
        </div>
        <div class="ml-auto">
          <img src="/assets/icons/folder-plus.svg" alt="" width="32" height="32" title="Bootstrap">
        </div>
      </div>
      <div class="flex-row flex-grow-1 bg-warning overflow-auto">
        <table class="table table-sm border border-danger max-heigth:200px">
          <thead>
            <tr>
              <th scope="col">File</th>
              <th scope="col">Size</th>
              <th scope="col">Date</th>
              <th scope="col">Type</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>

          </tbody>
        </table>
      </div>
    </div>
    <div class="queue-contents border border-danger">
      <div class="container h-100 p-2">
        <div class="align-items-center justify-content-center d-flex flex-column h-100">
          <img class="" src="/assets/icons/file-earmark-image.svg" width="50em" />
          <h1 class="text-muted ">Drag Files to transfer</h1>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

结果是这样的：

在此处输入图像描述

问题是，当我向顶行内的表格添加新项目并使表格皱起时，它会“吃掉”必须拖动文件才能传输的部分区域。这是我不太明白的事情，因为网格模板列和行将顶行限制为 66%，而底行限制为 33%。我认为这些是硬边，不能在它们之外渲染任何孩子。

我能做些什么来避免这种情况？

编辑：我试图将包含表格的 div 中的溢出自动移动到顶部布局 div 下方的 div 中。这确实有效（或多或少）。当顶行（将显示文件的行）需要更多空间来增长时，我可以看到一个滚动条，因为我添加了新元素。问题是一切都是滚动的。表格和按钮栏。我希望按钮栏得到修复。

标签： htmlcssbootstrap-4

解决方案

我在这里的代码段中对其进行了测试，它按预期工作。除非声明了特定的溢出规则，否则溢出将发生在主体上。我刚刚添加.device-fodlers { overflow: auto; }，如您所见，滚动条仅出现在顶部 2/3 容器中。

body {
  margin: 0;
  padding: 0;
}

.top-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
  border-style: none;
  height: 100vh;
  width: 100vw;
}

.device-folders {
  grid-row: 1/2;
  grid-column: 1/2;
  overflow: auto;
}

.queue-contents {
  grid-row: 2/3;
  grid-column: 1/2;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="site.css" crossorigin="anonymous">
  <title>Document</title>
</head>
<header>

</header>

<body>
  <div class="top-layout">
    <div class="device-folders d-flex flex-column border border-success">
      <div class="d-flex flex-row border border-primary">
        <div>
          <img src="/assets/icons/arrow-left-circle.svg" alt="" width="32" height="32" title="Bootstrap">
        </div>
        <div class="ml-auto">
          <img src="/assets/icons/folder-plus.svg" alt="" width="32" height="32" title="Bootstrap">
        </div>
      </div>
      <div class="flex-row flex-grow-1 bg-warning overflow-auto">
        <table class="table table-sm border border-danger max-heigth:200px">
          <thead>
            <tr>
              <th scope="col">File</th>
              <th scope="col">Size</th>
              <th scope="col">Date</th>
              <th scope="col">Type</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>

          </tbody>
        </table>
      </div>
    </div>
    <div class="queue-contents border border-danger">
      <div class="container h-100 p-2">
        <div class="align-items-center justify-content-center d-flex flex-column h-100">
          <img class="" src="/assets/icons/file-earmark-image.svg" width="50em" />
          <h1 class="text-muted ">Drag Files to transfer</h1>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

推荐阅读