Question

我有一个页面，我应该在某些div上放置一些值然后打印它。这是页面的代码。

<!DOCTYPE html>
<html lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="scripts/jquery.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<style>
   .wrapperDiv{
        background-image: url(images/forPrint.jpg);
        background-repeat: no-repeat;  
   }
</style>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script>
function ajax(a,b,c){//url,function,just a placeholder
    c=new XMLHttpRequest;
    c.open('GET',a);
    c.onload=b;
    c.send()
}
var indentionFix=0;
var topIndentionInfo=-730;
var leftIndentionInfo=100;
window.onload=function(){
 ajax('toPrinter.data',function(){
    var tickets=this.response.split(",");
    var ticketsAmount=Math.ceil(tickets.length/4);
    var ticketsCount=0;
    for(var i=0;i<ticketsAmount;i++){
        $("body").append("<div id='wrapperDiv_"+i+"' class='wrapperDiv'><img src='images/forPrint.jpg' style='visibility:hidden'/></div>");
        topIndentionInfo=-730;
        indentionFix=0;
        for(var j=0;j<4;j++){
            if(ticketsCount<tickets.length){
                console.log(this.response);
                var infoDiv=$("#wrapperDiv_"+i).append("<div id='infoDiv_"+ticketsCount+"''></div>");
                $("#wrapperDiv_"+i).css({"min-height":"500pt"})
                $("#infoDiv_"+ticketsCount).css({position:"relative",width:"200px","min-height":"140px",top:topIndentionInfo+"pt",left:leftIndentionInfo+"pt"});
                topIndentionInfo+=90;
                topIndentionInfo-=indentionFix;
                indentionFix+=3;
                var topIndentionNumber=3;
                var leftIndentionNumber=100;
                var topIndentionSurname=5;
                var topIndentionFirstSecondName=5;
                var ticketValues=tickets[ticketsCount].split("|");
                //  Добавление номеров к листу билетов
                var number=$("#infoDiv_"+ticketsCount).append("<div id=number_"+ticketValues[0]+">"+ticketValues[0]+"</div>");
                $("#number_"+ticketValues[0]).css({position: "relative", top: topIndentionNumber+"pt", left: leftIndentionNumber+"pt", "font-size":"16pt"});
                // Добавление ФИО к листу билетов
                var fioSplit=ticketValues[1].split(" ");
                var surname=fioSplit[0].toUpperCase();
                var firstSecondName=fioSplit[1]+" "+fioSplit[2];
                var surnameDiv=$("#infoDiv_"+ticketsCount).append("<div class='fio' id=surname_"+ticketValues[0]+">"+surname+"</div>");
                var firstSecondNameDiv=$("#infoDiv_"+ticketsCount).append("<div class='fio' id=firstSecondName_"+ticketValues[0]+">"+firstSecondName+"</div>");
                $("#surname_"+ticketValues[0]).css({position: "relative", top: topIndentionSurname+"pt", width:"200px", "font-size":"16pt", "min-height":"20pt"});
                $("#firstSecondName_"+ticketValues[0]).css({position: "relative", top: topIndentionFirstSecondName+"pt", width:"200px", "font-size":"16pt"});
                ticketsCount++;
            }
        }
    }
 });
}
</script>
<body class="printBody">
    <input type="button" value='Распечатать' onclick="window.print();return false;" id='print' class='btn btn-primary btn-sm'></input>
</body>
</html>

我试图改变这个页面：http://jsfiddle.net/zpAHM/2/ 但由于某种原因，它不会加载背景图像，也不会添加div。所以问题是div #wrapper_i之后有很多空间。

因此，当我想要打印时，它会在它之后添加空白页面。我该怎样预防呢？这是一些bug的图片。 Here you can see empty space, which I don't need
Here is fields I should add

如何防止div的高度扩大

0 个答案: