技術標籤：前端 htmlcssdivhtmlcss

垂直滾動條：

<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>