wkhtmltopdf div大小问题（由javascript制作的div）

Question

大家。 如果可以，请教我如何解决这个问题。

我想制作用wkhtmltopdf制作的网站的pdf文件。 但它在浏览器和pdf文件之间的分区高度上产生差异。

例如，

when browser

在浏览器中查看时，这两个div的高度相同。

when pdf

但是从同一页面制作的pdf就像这样。两个div的高度不同。

和javascript setHeight代码在这里

function heigtSet() {
$('#printoutput>div').each(function(){
    console.log('test');
    console.log($(this).find('#adaptation .adaptationCnt').height());
    console.log($(this).find('#adaptationDetail .adaptationCnt').height());
    if ($(this).find('#adaptation .adaptationCnt').height()>$(this).find('#adaptationDetail .adaptationCnt').height()){
        $(this).find('#adaptationDetail .adaptationCnt').height($(this).find('#adaptation .adaptationCnt').height()-15);
    }else{
        $(this).find('#adaptation .adaptationCnt').height($(this).find('#adaptationDetail .adaptationCnt').height()+15);
    }
});

}

请帮帮我。

※添加信息

html（php），css和javascript在这里

和wkhtmltopdf的命令就是这个

wkhtmltopdf --javascript-delay 2000 --zoom 0.8 --viewport-size 1024x760 --orientation landscape --load-error-handling ignore sampleurl sample.pdf'

function dataSet(pType) {
	var resultAvg = new Object;
	var t_total_adaptation_1 = 0;
	var t_total_adaptation_2 = 0;
	var t_total_adaptation_3 = 0;
	var t_total_adaptation_4 = 0;
	var t_total_mid_adaptation_1 = 0;
	var t_total_mid_adaptation_2 = 0;
	var t_total_mid_adaptation_3 = 0;
	var t_total_mid_adaptation_4 = 0;
	var t_total_non_adaptation_1 = 0;
	var t_total_non_adaptation_2 = 0;
	var t_total_non_adaptation_3 = 0;
	var t_total_non_adaptation_4 = 0;
	var t_total_num = 0;

	var t_total2_adaptation_1 = 0;
	var t_total2_adaptation_2 = 0;
	var t_total2_adaptation_3 = 0;
	var t_total2_adaptation_4 = 0;
	var t_total2_mid_adaptation_1 = 0;
	var t_total2_mid_adaptation_2 = 0;
	var t_total2_mid_adaptation_3 = 0;
	var t_total2_mid_adaptation_4 = 0;
	var t_total2_non_adaptation_1 = 0;
	var t_total2_non_adaptation_2 = 0;
	var t_total2_non_adaptation_3 = 0;
	var t_total2_non_adaptation_4 = 0;
	var t_total2_num = 0;

	var t_total_1_num = 0;
	var t_total_mid_num = 0;
	var t_total_nonmid_num = 0;
	var t_total_sub_1_num = 0;
	var t_total_sub_mid_num = 0;
	var t_total_sub_nonmid_num = 0;
	var t_group_name_list = new Array;
	var t_group_name = '';

	console.log('testworld');
	for(key in result){
		if(key!='group_name'){
			var group = result[key];

			resultAvg[group['name']] = new Object;
			t_group_name_list.push(group['name']);
			var t_sub_num = 0;

			group['member'].forEach(function(member){

				if (resultAvg[group['name']][member['subgroup']]==undefined){
					resultAvg[group['name']][member['subgroup']] = new Object;
					resultAvg[group['name']][member['subgroup']]['member'] = new Array;
				}
				resultAvg[group['name']][member['subgroup']]['member'].push(member);
				t_total_num++;
				t_sub_num++;

				if (member['1_flag']=='1'){
					t_total_1_num++;
					t_total_adaptation_3 += member['adaptation_3']['standard_score'];
					t_total_adaptation_4 += member['adaptation_4']['standard_score'];
				}else{
					if (member['mid_joined_flag']=='1'){
						t_total_mid_num++;
						t_total_mid_adaptation_1 += member['adaptation_1']['standard_score'];
						t_total_mid_adaptation_2 += member['adaptation_2']['standard_score'];
						t_total_mid_adaptation_3 += member['adaptation_3']['standard_score'];
						t_total_mid_adaptation_4 += member['adaptation_4']['standard_score'];
					}else{
						t_total_nonmid_num++;
						t_total_non_adaptation_1 += member['adaptation_1']['standard_score'];
						t_total_non_adaptation_2 += member['adaptation_2']['standard_score'];
						t_total_non_adaptation_3 += member['adaptation_3']['standard_score'];
						t_total_non_adaptation_4 += member['adaptation_4']['standard_score'];
					}
					t_total_adaptation_1 += member['adaptation_1']['standard_score'];
					t_total_adaptation_2 += member['adaptation_2']['standard_score'];
					t_total_adaptation_3 += member['adaptation_3']['standard_score'];
					t_total_adaptation_4 += member['adaptation_4']['standard_score'];
				}
			});

		}else{
			t_group_name = result[key];
		}

	}


	var thtml = '';
	var tnum = 1;

	thtml += '<div id="contents" class="contentsPage'+tnum+'"><div id="headerCont"><div id="titles"><h1><span>適応感レポート</span>で可視化する組織の適応状況</h1><div class="names"><p class="subtitles">'+pType+'</p><p class="group">';
	thtml += t_group_name;
	thtml += '</p></div></div></div>';
	thtml += '<div id="leftCont"><section id="adaptation"><h2>adp1</h2><div class="adaptationCnt"><div id="grph1" class="grphXY"><div class="grphY"><div class="grphY1 grphUnit">high</div><div class="grphY2 grphUnit">low</div><div class="grphYtitle grphTitle">adp</div><div class="grphYSub grphSub">adp</div></div><div class="grphPlot"><table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table><ul class="grphPoint"><li></li><li style="top:107px"></li></ul></div><div class="grphX"><div class="grphX1 grphUnit">high<span>▲</span></div><div class="grphX2 grphUnit"><span>▼</span>low</div><div class="grphXtitle grphTitle">force</div><div class="grphXSub grphSub">desc</div></div>';

	thtml += '</div><div class="clearfix"></div></div></section></div>';
	thtml += '<div id="rightCont"><section id="adaptationDetail"><h2>adp2</h2><div class="adaptationCnt"><table><tbody class="thead"><tr><th class="dataTitleText"><p>low</p></th><th></th><th class="dataTitleText"><p>mid</p></th><th class="dataTitleText"><p>hight</p></th></tr></tbody><tbody><tr><th class="tate">adp1</th><td><p class="meterBar"></p><p class="av1"></p><p class="av2"></p></td><td></td><td></td></tr><tr><th class="tate">adp2</th><td><p class="meterBar"></p><p class="av1"></p><p class="av2"></p></td><td></td><td></td></tr><tr><th class="tate">adp3</th><td><p class="meterBar"></p><p class="av1"></p><p class="av2"></p></td><td></td><td></td></tr><tr><th class="tate">adp4</th><td><p class="meterBar"></p><p class="av1"></p><p class="av2"></p></td><td></td><td></td></tr></tbody></table><div class="adaptationDetailText adaptationDetailText1"><p class="av1"></p>av1</div><div class="adaptationDetailText adaptationDetailText2"><p class="av2"></p>av2</div></div></section></div><div class="clearfix"></div>';
	thtml += '</div>';
	thtml += '<footer><p class="center">(c)Recruit Career Co., Ltd.</footer>';
	tnum++;

	$('#printoutput').html(thtml);
	heigtSet();

	var tnum = 1;
	var t_colorNum = 0;
	var thtml = '';
	var t_out_html2 = '';

	var tMax = t_total_num;
	var tsize = (500/tMax);
	if (tsize>10){
		tsize = 10+2;
	}
	if (tsize<7){
		tsize = 7;
	}
	var tsieHtml = 'width:'+tsize+'px; height:'+tsize+'px;border-radius:'+tsize+'px;margin-top:'+tsize*(-0.5)+'px;margin-left:'+tsize*(-0.5)+'px';

	for(key in result){
		if(key!='group_name'){
			var group = result[key];
			t_colorNum++;
			var t_sub_group = group['name'];
			group['member'].forEach(function(member){
				if (member['adaptation_4']['standard_score']!=undefined && member['force']['standard_score']!=undefined){
					var t_adaptation_4=member['adaptation_4']['standard_score'];
					var t_force=member['force']['standard_score'];
					var tY = (1-(t_adaptation_4-20)/60)*$(".grphPlot").height();
					var tX = (t_force-20)/60*$(".grphPlot").width();
					var tGropeC ='groupColor'+t_colorNum;
					thtml += '<li class="'+tGropeC+'" style="top:'+tY+'px;left:'+tX+'px;'+tsieHtml+'"></li>';
				}else{
					console.log('no data!!!!')
				}
			});
		}
	}

	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(1) .meterBar').width((t_total_adaptation_1/(t_total_mid_num+t_total_nonmid_num)-20)/60*300+'%');
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(2) .meterBar').width((t_total_adaptation_2/(t_total_mid_num+t_total_nonmid_num)-20)/60*300+'%');
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(3) .meterBar').width((t_total_adaptation_3/t_total_num-20)/60*300+'%');
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(4) .meterBar').width((t_total_adaptation_4/t_total_num-20)/60*300+'%');
	if (t_total_mid_num==0 && t_total_nonmid_num==0){
		var t_display = 'none';
	}else{
		var t_display = 'block';
	}
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(1) .meterBar').css({'display':t_display});
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(2) .meterBar').css({'display':t_display});

	if (t_total_mid_num==0){
		var t_display = 'none';
	}else{
		var t_display = 'block';
	}
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(1) .av1').css({'left':(t_total_mid_adaptation_1/t_total_mid_num-20)/60*300+'%','display':t_display});
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(2) .av1').css({'left':(t_total_mid_adaptation_2/t_total_mid_num-20)/60*300+'%','display':t_display});
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(3) .av1').css({'left':(t_total_mid_adaptation_3/t_total_mid_num-20)/60*300+'%','display':t_display});
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(4) .av1').css({'left':(t_total_mid_adaptation_4/t_total_mid_num-20)/60*300+'%','display':t_display});

	if (t_total_nonmid_num==0){
		var t_display = 'none';
	}else{
		var t_display = 'block';
	}
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(1) .av2').css({'left':(t_total_non_adaptation_1/t_total_nonmid_num-20)/60*300+'%','display':t_display});
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(2) .av2').css({'left':(t_total_non_adaptation_2/t_total_nonmid_num-20)/60*300+'%','display':t_display});
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(3) .av2').css({'left':(t_total_non_adaptation_3/t_total_nonmid_num-20)/60*300+'%','display':t_display});
	$('.contentsPage'+tnum+' .adaptationCnt tr:nth-child(4) .av2').css({'left':(t_total_non_adaptation_4/t_total_nonmid_num-20)/60*300+'%','display':t_display});


	$('#output2').html(t_out_html2);


}
function heigtSet() {
	$('#printoutput>div').each(function(){
		console.log('test');
		console.log($(this).find('#adaptation .adaptationCnt').height());
		console.log($(this).find('#adaptationDetail .adaptationCnt').height());
		if ($(this).find('#adaptation .adaptationCnt').height()>$(this).find('#adaptationDetail .adaptationCnt').height()){
			$(this).find('#adaptationDetail .adaptationCnt').height($(this).find('#adaptation .adaptationCnt').height()-15);
		}else{
			$(this).find('#adaptation .adaptationCnt').height($(this).find('#adaptationDetail .adaptationCnt').height()+15);
		}
	});
}

@charset "UTF-8";



#step,
#adaptation {
	background: #ECEFF1;
}
#adaptation h2 {
	background: #a1b2ba;
}

#adaptationDetail {
	background: #ECEFF1;
}
#adaptationDetail h2 {
	background: #a1b2ba;
}
#adaptationDetail table {
	background: none;
	margin-top: 5px;
}

/*#adaptationDetail thead {*/
#adaptationDetail tbody.thead {
	background: none;
	color: #a1b2ba;
	height: 40px;
}
#adaptationDetail tbody:not(.thead) th{
	width: 40%;
}
#adaptationDetail tbody:not(.thead) td{
	width: 20%;
}
#adaptationDetail tbody.thead th{
	border:none;
	height: 40px;
    padding: 0;
}
#adaptationDetail tbody.thead th:nth-child(3){
	letter-spacing: -0.05em;
    font-size: 90%;
}
	
	
#adaptationDetail tbody.thead th.data p{
	text-align: right;
	margin-right: -0.5em;
	font-size: 110%;
	color: #333;
}
#adaptationDetail tbody.thead th.data p.titleUnder{
	text-align: center;
	margin-right:0;
	font-size: 130%;
}

#adaptationDetail tbody.thead th.dataTitleText:nth-child(1) p{
	text-align: right;
	margin-right: -1.5em;
	font-size: 110%;
	color: #333;
	font-weight: bold;
}
#adaptationDetail tbody.thead th.dataTitleText:nth-child(3) p{
	text-align: center;
	font-size: 110%;
	color: #333;
	font-weight: bold;
}
#adaptationDetail tbody.thead th.dataTitleText:nth-child(4) p{
	text-align: right;
	margin-right: -1em;
	font-size: 110%;
	color: #333;
	font-weight: bold;
}
#adaptationDetail tbody:not(.thead) tr{
	background: #fff;
	border:1px solid #ECEFF1;
}
#adaptationDetail tbody:not(.thead) tr th{
	padding: 20px 10px;
	font-size: 140%;
	height: 35px;
}
#adaptationDetail tbody:not(.thead) tr td{
	background: #CFD8DC;
	position: relative;
}
#adaptationDetail tbody:not(.thead) tr td:nth-child(3){
	background: #B0BEC5;
}
#adaptationDetail tbody:not(.thead) tr td:nth-child(4){
	background: #a1b2ba;
}
#adaptationDetail tbody:not(.thead) tr td:nth-child(5){
	background: #98abb4;
}
#adaptationDetail tbody:not(.thead) tr td p.meterBar{
	position: absolute;
	height:24px;
	left:0;
	top:50%;
	margin-top: -12px;
	width: 200px;
	display: block;
	background: #FDD835;
	z-index: 50;
}
#adaptationDetail tbody:not(.thead) tr:nth-child(4) td p.meterBar{
	background: #F9A825;
}
#adaptationDetail .adaptationDetailText p.av2,
#adaptationDetail .adaptationDetailText p.av1,
#adaptationDetail tbody:not(.thead) tr td p.av2,
#adaptationDetail tbody:not(.thead) tr td p.av1{
	position: absolute;
	top: 37.5px;
	left: 100px;
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	background: #009688;
	z-index: 60;
	margin-top: -5px;
	margin-left: -5px;
}
#adaptationDetail .adaptationDetailText p.av2,
#adaptationDetail tbody:not(.thead) tr td p.av2{
	left: 120px;
	background: #9C27B0;
	z-index: 61;
}
#adaptationDetail .adaptationDetailText{
	font-size: 85.7%;
	padding-left: 20px;
	margin-left: 10px;
	position: relative;
}
#adaptationDetail .adaptationDetailText p.av2,
#adaptationDetail .adaptationDetailText p.av1{
	top: 6px;
    margin: 0;
    left: 5px;
}


#adaptationComment {
	/*margin-top: 10px;*/
	margin-bottom: 10px;
}
#adaptationComment h2 {
    color: #78909C;
    padding: 8px 0;
}
#adaptationComment .hukidasi{
	background: #ECEFF1;
	line-height: 1.4em;
}
#adaptationComment .hukidasi:after {
	border-right-color: #ECEFF1;
}
#adaptation .adaptationCnt,
#adaptationDetail .adaptationCnt{
	padding-top: 5px;
	/*height: 440px;*/
	/*height: 500px;*/
}
#adaptationDetail .adaptationCnt{
	padding: 20px 25px 10px;
	/*height: 425px;*/
	/*height: 485px;*/
}
footer {
    position: fixed;
    width: 100%;
    bottom: 0;
}

<!DOCTYPE html>
<html>
<title>report</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="report" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Action Switch & Advice" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />

<link rel="stylesheet" href="/assets/css/reset.css" media="all">
<!--<link rel="stylesheet" href="/assets/css/style.css" media="all">-->
<link rel="stylesheet" href="/assets/css/sample.css" media="all">
<link rel="stylesheet" href="/assets/css/sample.print.css" media="print">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="/assets/js/sample.js"></script>
<script type="text/javascript">
function Init()
{
  result=JSON.parse('<?php echo htmlspecialchars_decode($result); ?>');
  dataSet();
};

if( document.addEventListener )
{
 document.addEventListener( 'DOMContentLoaded', Init, false );
}

</script>

</head>
<body id="group">
	<section id="printoutput">
	</section>
<!--<hr />
  <div id="output" class="no-print"></div>
  <div id="output2" class="no-print"></div>
  <hr  class="no-print"/>
  <div  class="no-print" style="width:100%;"><?php echo $result; ?></div>-->
</body>
</html>