制作面板可滚动的困难
我有这个
一个使用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> </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>
3 个答案:
答案 0 :(得分：1)
除非内容高于父级，否则不会添加滚动条。但是，父母的身高也必须有限。
.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> </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>
答案 1 :(得分：1)
.panel__add-pos {
height: auto;
position: relative;
}
.panel-body {
max-height: 400px;
overflow-x: hidden;
max-height: none;
overflow-y: scroll
}
尝试使用css代码
答案 2 :(得分：1)
你可以试试这个：
.panel {
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
并删除.panel-body
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？