html - 使面板可滚动的困难

标签 html css twitter-bootstrap

我有这个

layout

一个使用 bootstrap 的简单面板，它在表格中显示部门列表，底部有一个输入字段，带有一个要添加的按钮。这个面板的高度是固定的，正如你所看到的，内容溢出了面板。我试图让它可滚动，但我仍然得到相同的最终结果。

我想要的是表格中的内容位于面板内并且可以滚动。

.panel-primary {
  border-color: #b3b3b3;
}
.panel__add-pos {
  height: 400px;
  position: relative;
}
.panel-heading {
  display: flex;
  padding: 5px 15px;
}
.panel-body {
  overflow-x: hidden;
  max-height: none;
  overflow-y: scroll;
}
.panel-title {
  font-size: 14px;
}
.department-actions {
  width: 70px;
  height: 14px;
}
.department-actions a {
  color: #d2d2d2;
}
.department-actions a:hover {
  color: #000000;
}
.panel__add-dept form {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 97%;
}
.panel__input-container {
  border: 0;
  border-bottom: 1px solid #cccccc;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0;
  padding-left: 10px;
}
.panel__input-container:focus {
  border-color: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none);
}
[class*="btn"] {
  border-radius: 0;
}
[class*="col-"] {
  padding: 0 5px;
}
<div class="panel panel-primary panel__add-dept">
  <div class="panel-heading">
    <span class="panel-title">LIST OF DEPARTMENT</span>
  </div>
  <div class="panel-body">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Department Name</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Accounting Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="1" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="1">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="1" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>

        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>

        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <form action="http://localhost/" id="list-dept-form" data-panel_name="Department" method="post" accept-charset="utf-8">
      <div class="form-group add-department">
        <input class="form-control panel__input-container" id="new_department" type="text" name="new_department" placeholder="Add new department" value="">
      </div>
      <div class="form-group">
        <button type="button" class="btn btn-default button--dark pull-right" id="add-department" name="submit_dept">Add</button>
      </div>
    </form>
  </div>
</div>

最佳答案

除非内容比父元素高，否则不会添加滚动条。但是， parent 的高度也必须受到限制。

.panel-primary {
  border-color: #b3b3b3;
}
.panel__add-pos {
  height: 400px;
  position: relative;
}
.panel-heading {
  display: flex;
  padding: 5px 15px;
}
.panel-body {
  overflow-x: hidden;
  max-height: none;
  overflow-y: scroll;
  height: 100px; /* --- like this --- */
}
.panel-title {
  font-size: 14px;
}
.department-actions {
  width: 70px;
  height: 14px;
}
.department-actions a {
  color: #d2d2d2;
}
.department-actions a:hover {
  color: #000000;
}
.panel__add-dept form {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  width: 97%;
}
.panel__input-container {
  border: 0;
  border-bottom: 1px solid #cccccc;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  padding: 0;
  padding-left: 10px;
}
.panel__input-container:focus {
  border-color: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none);
}
[class*="btn"] {
  border-radius: 0;
}
[class*="col-"] {
  padding: 0 5px;
}
<div class="panel panel-primary panel__add-dept">
  <div class="panel-heading">
    <span class="panel-title">LIST OF DEPARTMENT</span>
  </div>
  <div class="panel-body">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Department Name</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Accounting Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="1" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="1">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="1" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>

        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>

        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td>Sales Department</td>
          <td>
            <div class="department-actions pull-right">
              <a href="http://localhost/" data-id="2" class="click-open">
                <i class="fa fa-chevron-right  pull-right"></i>
              </a>
              <a href="#" data-id="2">
                <i class="fa fa-close pull-right"></i>
              </a>
              <a href="#" class="click-edit" data-name="Department" data-id="2" data-toggle="modal" data-target="#edits">
                <i class="fa fa-pencil pull-right"></i>
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <form action="http://localhost/" id="list-dept-form" data-panel_name="Department" method="post" accept-charset="utf-8">
      <div class="form-group add-department">
        <input class="form-control panel__input-container" id="new_department" type="text" name="new_department" placeholder="Add new department" value="">
      </div>
      <div class="form-group">
        <button type="button" class="btn btn-default button--dark pull-right" id="add-department" name="submit_dept">Add</button>
      </div>
    </form>
  </div>
</div>

关于html - 使面板可滚动的困难，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41983840/

上一篇：html - 为什么 css nth-child 不适用于最后一个第二个元素？

下一篇：javascript - 谷歌地图即使在实现后也不可拖动/拖动

相关文章：

javascript - 填写输入字段时，标签仍然下降

Html Helper 不在嵌套站点母版页上工作

javascript - 如何降低图像加载的显着性？

css - 如何调整bootstrap 3缩略图以占据空白空间？

html - Bootstrap垂直滚动不流畅

带 BS 的 CSS nth-of-type 边距

html - css 悬停在表格行上不起作用

php - 如何更改我的 php 的颜色和字体大小？如果我尝试，它不起作用

css - 如何像我们在 Javascript 中那样(真正地)将参数传递给 CSS 类？

javascript - 下拉菜单未显示

©2024 IT工具网  联系我们