极客观点
项目管理
HarmonyOS
页面上的四个div设置了绝对定位，如何让这四个div出现滚动条？？超出页面的部分可以滚动？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖动div</title>
<link type="text/css" rel="stylesheet" href="css/public.css" />
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
/*拖曳*/
.drag{position:fixed;background:#ccc;z-index:999;border:1px solid #cbcbcb;cursor:move;width:200px;}
.tbLast tbody tr .dataTd{cursor:pointer;}
.userMenu .homeBtn{cursor:pointer;background:url('../images/home.png');width:34px;display:inline-block;vertical-align:middle;height:34px;margin-right:10px;margin-top:10px;}
.userMenu .homeBtn:active{cursor:pointer;background:url('../images/home.png');width:34px;display:inline-block;vertical-align:middle;height:34px;margin-right:10px;margin-top:10px;}
.userMenu .homeBtn:hover{cursor:pointer;background:url('../images/homeBtn_on.png');width:34px;display:inline-block;vertical-align:middle;height:34px;margin-right:10px;margin-top:10px;}
.detailTab{background:#fff;width:100%;}
.cha{background:url('../images/cha.png');width:14px;height:14px;display:block;position:absolute;top:3px;cursor:pointer;right:3px;display:inline-block;}
.tzgBox{width:400px;display:inline-block;margin-right:-7px;*display:inline;*zoom:1;}
#tzgDiv{width:100%;overflow-x:auto;white-space:nowrap;}
body{
position: relative;
top: 0;
left: 0;
}
#tzgDiv #tzg1{
position: absolute;
left: 40px;
top: 125px;
}
#tzgDiv #tzg2{
position: absolute;
left: 440px;
top: 125px;
}
#tzgDiv #tzg3{
position: absolute;
left: 840px;
top: 125px;
}
#tzgDiv #tzg4{
position: absolute;
left: 1240px;
top: 125px;
}
.tbLast2{width:100%;font-size:12px; background: #fff;}
.tbLast2 th{background:#5a6692;color:#fff;text-align:left;height:34px;line-height: 34px;border-right:1px solid #cbcbcb;font-size:14px;padding-left:8px}
.tbLast2 tbody td{background-clip:padding-box;/*position:relative;*/color:#484848;text-align:center;padding:6px 3px;border-bottom:1px solid #cbcbcb;border-right:1px solid #cbcbcb;}
.tbLast2 tbody td:last-child{border-right:0;}
.tbLast2 tbody tr.last td{border-bottom:0;}
.tbLast2 tbody tr.odd td{background:#fff;}
.tbLast2 tbody tr.edd td{background:#f4f8fb;}
.tbLast2 .updatBtn{display:inline-block;background:#f1f3f6;color:#484848;border-style:solid;border-width:1px;border-color:#bfbfbf;border-radius:3px;padding:2px 7px;font-size:12px;cursor:pointer;}
.tbLast2 tbody tr.redRow td{color:#ff0000;font-weight:bold;}
.tbLast2 tbody tr.boldRow td{font-weight:bold;font-size:14px}
.tbLast2 tbody tr td.redTd{color:#ff0000;font-weight:bold;}
.tbLast2 tbody tr td.boldTd{font-weight:bold;color:#484848;}
.tbLast2 tbody tr td.dataTd{text-align:left;padding-left:8px;line-height:2;background-clip:padding-box;}
.tbLast2 tbody tr td.dataTd div{width:190px;min-width: 190px;}
.tbLast2 tbody tr td.redTd{background-clip:padding-box;}
.tbLast2 tbody tr td.dataTd span{color:red;}
.tbLast2 tbody tr td{background-clip:padding-box;}
.tbLast2 tbody tr.odd td,.tbLast tbody tr.edd td{background-clip:padding-box;}
/*田字格*/
.tbLast2 tbody .dataTdNew{text-align:left;border:1px solid #cbcbcb;cursor:pointer;}
.tbLast2 tbody .dataTdNew div em{width:58px;display:inline-block;text-align:right;}
.tbLast2 tbody .dataTdNew div i{font-style:normal;color:#ff5b5b;font-family:'arial';}
.tbLast2 tbody .dataTdNew div .i1{color:#00a2ff;}
.uploadimg{background:url('../images/upload.png') no-repeat;display:inline-block;width:28px;height:28px;vertical-align:middle;cursor:pointer;float:right;margin-top:3px;margin-right:10px;}
.uploadimg:hover{background:url('../images/upload_on.png') no-repeat;display:inline-block;width:28px;height:28px;vertical-align:middle;}
.uploadimg1{background:url('../images/upload1.png') no-repeat;display:inline-block;width:28px;height:28px;vertical-align:middle;cursor:pointer;float:right;margin-right:10px;margin-top:3px;}
.uploadimg1:hover{background:url('../images/upload1_on.png') no-repeat;display:inline-block;width:28px;height:28px;vertical-align:middle;}
</style>
</head>
<body>
<div id="tzgDiv" style="overflow-x: auto;">
<div id="tzg1" class="tzgBox">
<table class="tbLast2">
<thead>
<tr>
<th colspan="2"><a class="uploadimg" onclick="ImgBrow.show('../images/housePic.png');"></a>亚信小谷围-1期-1栋 第一单元</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="dataTdNew dragtd">
<select style="width:58px display:none">
<option>01</option>
<option>02</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
<tr class="edd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="tzg2" class="tzgBox">
<table class="tbLast2">
<thead>
<tr>
<th colspan="2"><a class="uploadimg1"></a>亚信小谷围-1期-1栋 第二单元</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
<tr class="edd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="tzg3" class="tzgBox">
<table class="tbLast2">
<thead>
<tr>
<th colspan="2"><a class="uploadimg1"></a>亚信小谷围-1期-1栋 第三单元</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
<tr class="edd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="tzg4" class="tzgBox">
<table class="tbLast2">
<thead>
<tr>
<th colspan="2"> <a class="uploadimg1"></a>亚信小谷围-1期-1栋 第四单元</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
<tr class="edd">
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
<td class="dataTdNew dragtd">
<select style="width:58px">
<option>01</option>
</select>
<div><em> 均套面积:</em>
<i class="i1">91.93</i>
</div>
<div><em> 均 价:</em>
<i>20,675.61</i>
</div>
<div><em> 金 额:</em>
<i>68,921,981.92</i>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
html5
overflow: scroll;,元素要设定长和高才能生效