美文网首页
html列表表头锁定,列表高度可根据浏览器高度计算

html列表表头锁定,列表高度可根据浏览器高度计算

作者: 罗宏宇 | 来源:发表于2018-12-26 09:48 被阅读0次

    首先看html

      <div style="width: 100%;">
          <div class="table-head" id="btid1">
          <table>
              <colgroup>
                  <col style="width: 80px;" />
                  <col />
              </colgroup>
              <thead>
                  <tr><th>序号</th><th>内容</th></tr>
             </thead>
         </table>
         </div>
         <div class="table-body" id="gdid">
         <table>
             <colgroup><col style="width: 80px;" /><col /></colgroup>
             <tbody>
                 <tr><td>1</td><td>我只是用来测试的</td></tr>
                 <tr><td>2</td><td>我只是用来测试的</td></tr>
                 <tr><td>3</td><td>我只是用来测试的</td></tr>
                 <tr><td>4</td><td>我只是用来测试的</td></tr>
                 <tr><td>5</td><td>我只是用来测试的</td></tr>
                 <tr><td>6</td><td>我只是用来测试的</td></tr>
                 <tr><td>7</td><td>我只是用来测试的</td></tr>
                 <tr><td>8</td><td>我只是用来测试的</td></tr>
                 <tr><td>9</td><td>我只是用来测试的</td></tr>
                 <tr><td>10</td><td>我只是用来测试的</td></tr>
                 <tr><td>11</td><td>我只是用来测试的</td></tr>
                 <tr><td>12</td><td>我只是用来测试的</td></tr>
                 <tr><td>13</td><td>我只是用来测试的</td></tr>
                 <tr><td>14</td><td>我只是用来测试的</td></tr>
                 <tr><td>15</td><td>我只是用来测试的</td></tr>
             </tbody>
         </table>
         </div>
     </div>
    

    css如下

    .table-head{padding-right:11px;padding-top:14px;padding-bottom:5px;}
    .table-body{width:100%; height:800px;overflow-y:scroll;}
    .table-head table,.table-body table{width:100%;}
    .table-body table tr:nth-child(2n+1){}
    .table-body table tr:hover{}
    

    js如下

    autodivheight();
    function autodivheight(){ //函数:获取尺寸
        //获取浏览器窗口高度
        var winHeight=0;
        if (window.innerHeight)
            winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;
        //通过深入Document内部对body进行检测,获取浏览器窗口高度
        if (document.documentElement && document.documentElement.clientHeight)
            winHeight = document.documentElement.clientHeight;
        //DIV高度为浏览器窗口的高度
        var btHeight1 = document.getElementById("btid1").offsetHeight;//表头高度
        document.getElementById("gdid").style.height= winHeight-btHeight1-15 +"px";
    }
    

    相关文章

      网友评论

          本文标题:html列表表头锁定,列表高度可根据浏览器高度计算

          本文链接:https://www.haomeiwen.com/subject/egbclqtx.html