Question

我有一个页面，其中包含许多包含内容的div。 div用行包裹 - 顶部一行，底部一行，为用户提供每个div的框架。

现在我有一个问题，如果这些div有很多内容，他们在网站和实际打印页面中的外观是不同的。实际打印的页面需要更多行来显示相同的内容，因此我需要使div更高并降低底线。

我写了一些在chrome中运行的代码：

＆＃13;

    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function (mql) {
        if (mql.matches) {
            changeDivHeight();
        } 
    });

＆＃13;

对于FF和IE，代码不起作用。我用：

＆＃13;

    window.onbeforeprint = function () {
        changeDivHeight();
    };

    window.onafterprint = function () {
        changeDivHeight();
    }

// i need those two because when i'm back in the web-site i want the height to be changed again because in the print mode the page what thinner..

＆＃13;

changeDivHeight查看所有div的子元素，并将其高度添加到div高度。正如我所说，它适用于铬。在FF和IE中，它不起作用，我认为因为它们没有打印预览，div不会改变以适应实际的打印页面，而在chrome中我确实有打印预览所以div适合实际打印的页面。

如何在FF和IE中修复此问题？

谢谢！

修改

＆＃13;

function changeDivHeight() {
    $.each(".div, function(index, div) {
        var newHeight = 0;
        for (i = 0; i < div.children.length) {
             newHeight += div.children[i].clientHeight;   
         }
  
         if (newHeight > 240) {
              $(div.parent).css("height", newHeight);
          }
   }
}

＆＃13;

并且每个div都填充了P元素可能有很多文本

修改

我发现因为chrome有打印预览，所以打印视图中的段落的clientHeight会有很多文本更改，因此它可以正常工作。在IE和FF中我不具备此功能，因此高度不会改变，并且它不起作用。

Answer 1

您应该可以在不使用jQuery或JavaScript的情况下执行此操作。如果我正确理解你的问题，可以使用CSS实现，这应该与所有现代浏览器兼容。只需将以下内容添加到CSS的底部即可。

@media print {
    #divtomakelarger {
        height: auto; /*or whatever value you want*/
    }
}

打印

1 个答案: