2017-06-05 50 views
1

我有一個角色應用程序,現在我正在處理角度pdf。在高度展開時滲入身體的背景顏色

控制器和視圖工作絕對正常,PDF顯示得很好,有一個問題。由於PDF高於模塊的最小高度,它會擴展它的高度。

這似乎使背景顏色變成模塊背景的顏色。 通常情況下,背景爲灰色十歲上下,但隨着高度的擴展模塊的背景顏色似乎滲入身體(的頁面是一個佔位符我沒有加入與他們!): enter image description here

正如你可以看到網頁背景大約有80%不同。

我想一直有相同的背景顏色。

目前的情況是我設置背景色的樣式表,並指身體:

body { 
    background-color: #D2D5D3; 
    -webkit-font-smoothing: antialiased; 
} 

其他我什麼都不做與人體的背景。唯一的其他背景我是從md-content採取:

<div ng-controller="pdfpageController as vm"> 
    <md-content id="pdfpage" layout-padding> 
     <md-toolbar> 
      <div class="md-toolbar-tools"> 
       <md-button class="md-primary md-raised" ng-click="goback()"> 
        <md-icon md-svg-icon="../resources/img/arrow_left.svg"></md-icon> 
        <span class="orange"><b>Back</b></span> 
       </md-button> 
       <h2 flex md-truncate class="text-center">Shifts</h2> 
      </div> 
     </md-toolbar> 
     <md-toolbar class="md-wan md-hue-2" style="border-top: 0.5px solid black"> 
      <h1>{{pdfName}}</h1> 
     </md-toolbar> 

      <ng-pdf template-url="app/views/partials/viewer.html" scale="page-fit"></ng-pdf> 
      <canvas id="pdf-canvas"></canvas>d="test-canvas"></canvas>--> 

     <hr /> 
     <div layout="row" layout-align="start center"> 
      <div class="container"> 
       <span><b>Signature:</b></span> 
       <signature-pad accept="accept" clear="clear" height="220" width="568" dataurl="dataurl"></signature-pad> 
       <div layout="row"> 
        <md-button ng-model="signature" class="md-raised md-primary" ng-click="signature = accept()">Use signature</md-button> 
        <md-button ng-model="clearSig" class="md-warn md-raised md-hue-2" ng-click="clearSig = clear()">Clear signature</md-button> 
       </div> 
      </div> 
     </div> 

     <!--<iframe style="width: 400px; height: 400px;"></iframe>--> 
    </md-content> 
</div> 

有沒有人對我如何停止滲入人體的背景md-colors背景有何建議?

+0

嘗試body {height:100%;}。這裏有更多的建議:https://stackoverflow.com/questions/34591106/setting-body-height-to-100 – tech2017

+0

試過了。 – geostocker

+1

你有沒有在身上設置一個高度?如果是這樣,請將其移除或設置最小高度 – Pete

回答

0

嘗試增加min-height: 100%身體,並且還要確保身體的內容不position:absolutefixed,嘗試position:relative爲主體內容,以使身體適應它的大小與內容大小

0

嘗試以下操作:

html,body { 
height: 100%; 
} 

#pdfpage { 
height: auto !important; 
min-height: 100%; 
} 

我假設#pdf頁是這種情況下PDF查看器的容器元素。