Css 打印可滚动boootstrap模式

我的新web应用程序中有一个模式，我想打印模式内容，模式是可滚动的。现在我只能打印可查看的内容。我应该在style.css中做哪些更正

index.html

<div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog ">
                    <div class="modal-content">
                        <div class="modal-header">
                          <button type="button"  class="close" data-dismiss="modal">&times;</button>
                          <h4 ALIGN="center" class="modal-title">MR FINANCE</h4>
                        </div>
                        <div class="modal-body" >
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="form-group">
                                      Name:<input type="text" ng-model="cstmrname" class="form-control"  placeholder="Jane Doe" >
                                     </div>
                                     <div class="form-group">
                                     Phone:<input type="number"ng-model="cstmrphone" class="form-control"  placeholder="8086502009">
                                     </div>
                                 </div>
                                <div class="col-xs-6 ">
                                    <div class="text-right">
                                    <p ><STRONG >GLID:{{(GLID.GLID-0)+1}}</STRONG></p> 
                                    {{date | date:'MM-dd-yyyy'}}<br/> 
                                    {{place}}
                                    </div>
                                     <div class="form-group">
                                    Address: <textarea type="text" class="form-control" ng-model="cstmradress" rows="2"></textarea>
                                    </div>
                                </div>
                            </div>

                         <hr>

                            <div class="row">
                                 <div class="col-xs-12">
                                  <h4 align="center">
                                    Ornaments
                                  </h4>
                                  <form  class="form-inline form-group">
                                  <fieldset  data-ng-repeat="choice in choices">
                                  <div class="col-xs-3">                              
                                     <div class="form-group">
                                        <select  class="form-control" id="optioin1"  ng-model="choice.option1" >
                                        <option value="Ring" >Ring</option>
                                        <option value="Earings" >Earings</option>
                                        <option value="Chains">Chains</option>
                                        <option value="Necklaces">Necklaces</option>
                                        <option value="Bangles">Bangles</option>
                                        </select>
                                     </div>{{choice.option1}}
                                  </div>
                                <div class="col-xs-4">
                                   <div class="input-group">
                                    <input type="number" step="0.01" ng-model="choice.weight" class="form-control" placeholder="Weight" aria-describedby="basic-addon2">
                                    <span class="input-group-addon" id="basic-addon2">gm</span>
                                  </div>
                                </div>
                                 <div class="col-xs-4 pull-right">
                                   <button class="btn btn-default" ng-show="$last"  ng-click="removeChoice() "><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
                                   <button class="btn btn-default"  ng-show="$last" ng-click="addNewChoice()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                 </div>
                                 </fieldset>
                                   </form>
                               </div>
                            </div>

                            <div class="row">
                               <div class="col-xs-6">
                                    <p class="text-left"> Total Numbers:{{ choices.length}}</p> 
                                </div>      
                                <div class="col-xs-6"><p>Total Weight: {{total(number)}}gm</p>
                                </div>
                            </div>

                    <hr>

                            <form  align="center" class="form-inline">
                            PledgeAmt:
                            <div class="input-group">
                            <input type="number"  ng-model="pledgeamt" class="form-control" placeholder="{{(total()*2050)-3000}}-{{total()*2050}}" >
                            <span class="input-group-addon" id="basic-addon2">RS</span>
                           </div>
                           </form>

                    <hr>  
                          <div class="row">
                              <h5 align="center"> Interest</h5>
                            <div class="col-xs-6">
                             <p> 1-3Month:{{ intrst[0].INTR1}}%({{(pledgeamt/100)*1}}RS/day)</p> 
                            </div>
                            <div class="col-xs-6">
                             <p > 3-12Month:{{ intrst[0].INTR2}}%({{(pledgeamt/100)*2}}RS/day)</p> 
                            </div>
                          </div>
            <tr ng-repeat="ornament in data">
            <td>{{ornament.GLID}}</td>
            <td>{{ornament.WEIGHT}}</td>
            <td>{{ornament.TOTGRAM}}</td>
            </tr>
            <div class="modal-footer">
                   <button type="button"  ng-click="insertvalue()" class="btn btn-default" >Submit</button>
                   <button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
                      </div>
                     </div>
               </div>
           </div>

---

您的css实现是正确的方法，但是您需要在打印文档时使当前具有滚动的类可见

如果您希望更改css而不是html：

@media print {
   /* if modal-body is your scrollable class */
   .modal-body {
     width: auto;
     height: auto;
     overflow: visible !important;  
   }
}

---

当我使用以下样式时，也会打印背景内容，如果我将其设置为“无可见性”，则会生成额外的5页。

@media print {
   /* if modal-body is your scrollable class */
   .modal-body {
     width: auto;
     height: auto;
     overflow: visible !important;  
   }
}