利用html中的div標籤實現網頁中某一塊區域的自動滾動
阿新 • • 發佈：2019-01-22
在web頁面中，有一塊固定大小的區域。在此區域中顯示的資料由於條件不同而顯示的資料也不同，有的時候顯示的資料非常的多，會超出此區域的大小範圍，而有的時候很少。所以希望有一種設定，能根據資料的多少，在固定區域中自動產生滾動條。在web頁面中div標籤就可以滿足此要求。
html程式碼如下：
<html>
<body>
<div style="height:400;overflow:auto ">
<table width="543" height="300" border="1">
<tr>
<td width="59"><div align="center"></div></td>
<td width="59"><div align="center"></div></td>
<td width="403"><div align="center"></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
說明：div的高度為400，而table的高度為300，此種情況不會出現滾動條。div的高度為300，而table的高度為400，此種情況下，在table的旁邊就會出現滾動條。主要是利用了div的overflow屬性。
html程式碼如下：
<html>
<body>
<div style="height:400;overflow:auto ">
<table width="543" height="300" border="1">
<tr>
<td width="59"><div align="center"></div></td>
<td width="59"><div align="center"></div></td>
<td width="403"><div align="center"></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
說明：div的高度為400，而table的高度為300，此種情況不會出現滾動條。div的高度為300，而table的高度為400，此種情況下，在table的旁邊就會出現滾動條。主要是利用了div的overflow屬性。