垂直滚动条:
<div style="height:300px;width:200px;overflow-y:auto;background:#EEEEEE;">
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通信
</button>
</div>
水平滚动条:
<div style="height:300px;width:200px;overflow-x:auto;background:#EEEEEE;">
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通信
</button>
</div>
或者:
<div style="height:300px;width:200px;overflow:auto;background:#EEEEEE;">
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通信
</button>
</div>
设置有宽和高,如果内容的高大于设置的高,就会出现垂直滚动条,如果内容的宽大于设置的宽,就会出现水平滚动条。(只有触发这两个条件才会出现滚动条)
设置滚动条一直存在(只需要将overflow:auto;改为overflow:scroll;):
<div style="height:300px;width:200px;overflow:scroll;background:#EEEEEE;">
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通信
</button>
</div>
垂直和水平滚动条同时存在:
<div style="height:300px;width:200px;overflow-x:auto;overflow-y:auto;background:#EEEEEE;">
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机
</button>
<button id="btn_Grid_comm" class="md-trigger btn btn-menu btn-sm" data-modal="modal-1">
主机通信
</button>
</div>