写项目遇见这样一个问题，用vue搭建的项目，有一个打印的功能，使用window.print()打印，但是vue中的多行文本与文字标题不在一页，出现大量空白。打印设置如果是纵向没有问题，一旦设置成横向出现问题。 搜索有人说是height：100%或者margin不是0，但是都尝试过没有作用，代码如下
<li class="fl box1fl box1Item" style="width:1000px">
<div class="clear">
<span class="sp1 fl">标题：</span>
<div class="fl sp2" style="line-height:37px;" :title="items.payView.vcTitle">
<p class="el-table-overflowdotted">{{items.payView.vcTitle || '暂无'}}</p>
</div>
</div>
</li>
<li class="fl box1fl box1Item">
<span class="sp1 fl">项目名称：</span>
<div class="fl sp2" :title="items.payView.projName">
{{items.payView.projName}}
</div>
</li>
<li class="fl box1fl box1Item">
<span class="sp1 fl">发起人：</span>
<div class="fl sp2" :title="items.payView.applicantName">{{items.payView.applicantName + "("+(items.payView.applicantOrgName || '无')+")"}}</div>
</li>
<li class="fl box1fl box1Item">
<span class="sp1 fl">项目所属部门：</span>
<div class="fl sp2" :title="items.payView.orgName">
{{items.payView.orgName}}
</div>
</li>
<li class="fl box1fl box1Item" v-if="items.payView.dSubmittime">
<span class="sp1 fl">发起时间：</span>
<div class="fl sp2" :title="items.payView.dSubmittime">
{{items.payView.dSubmittime}}
</div>
</li>
<li class="clear"></li>
<li class=" box1Item">
<span class="sp1 fl tk-redpoint">正文：</span>
<el-form-item class="fl tklarge-input" prop="payView.vcPayContent">
<el-input
:readonly="true"
type="textarea"
:autosize="{minRows: 12}"
placeholder="请输入内容"
v-model="items.payView.vcPayContent">
</el-input>
</el-form-item>
</li>
</el-form>
现象如图所示
