web用css来实现打印效果的时候，最后一个div保持在界面最下方

 

最初是以为css的属性可以控制它的位置。

找了很多发现都是让修改postion为absolute或者fixed

修改为absolute的时候这个div会固定在打印页的第一页。

修改为fixed的时候会每个打印界面都出现。

发现打印的高度是根据table表格的内容会自动扩展，如果这个最后一个div直接修改margin-top。这样也能实现移动它的位置，但是会出现一个问题，

假设每个打印页可以显示10行记录，当有13行的时候，通过调整margin-top的值，把这个div放到界面最下方了，复合我想要的效果，但是当数据为15行的时候，可能就会把它顶到下一页去了。

所以最终，使用js获取table中的tr然后设置每页显示多少行，到达指定位置的时候进行换页。

到最后一页的时候会判断当前页面的实际行数与最大可以显示的行数差多少然后进行补充tr来占位置。这个时候再去调整div的margin-top值。

这样还会有一个问题就是tr里边内容过长的时候会把它撑高，所以最好显示tr的内容或者把它的高度设置高点，尽量避免这个问题。

 <script type='text/javascript'>
//tableid表格的id，lineCount每页最大行数，bottomID最后一个div的id，MarOrPad判断用margin还是padding，topPx像素值
        function SetNewTable(tableId, lineCount, bottomId,MarOrPad,topPx) {
            // 获取table元素
            var table = document.getElementById(tableId);
            // 获取table中所有的tr元素
            var trCollection = table.getElementsByTagName("tr");
            //存储表格中行的数量，用来做判断
            var trs = trCollection.length;
            //用来设置每页行数
            //var lineCount = 10;
            // 遍历tr集合
            for (var i = 1; i < trs; i++) {
                var tr = trCollection[i];
                // 如果当前行是lineCount的倍数，就添加分页符
                if (i % lineCount == 0 && i < trs) {
                    tr.style.pageBreakBefore = "always";
                }
            }
            //判断行数是否打印lineCount并且不是lineCount的倍数
            if (trs > lineCount && trs % lineCount != 0) {
                //计算出最后一页相差多少行
                var x = Math.floor(trs / lineCount);
                //相差行的数量
                var newtrs = (lineCount * (x + 1)) - trs;
                // alert(newtrs);
                for (var i = 0; i < newtrs; i++) {
                    //创建行，补充数量
                    var newtr = document.createElement("tr");
                    table.append(newtr);
                }
            }
            if (trs > lineCount) {
                var bot = document.getElementById(bottomId);
                //判断是margintop还是paddingtop
                if (MarOrPad == "Mar") {
                    bot.style.marginTop = topPx;
                } else {
                    bot.style.paddingTop = topPx;
                }
            }
        }

    </script>