当在高度上展开时，背景颜色渗入身体答案

【问题标题】：Background color seeping into body when expanded on height当在高度上展开时，背景颜色渗入身体
【发布时间】：2017-06-05 22:40:38
【问题描述】：

我现在正在开发一个实现 angular-pdf 的 Angular 应用程序。

控制器和视图工作正常，pdf 显示也很好，但有一个问题。由于 PDF 高于模块的最小高度，它会扩展它的高度。

这似乎使背景颜色变成了模块背景的颜色。通常背景是灰色的，但随着高度的增加，模块的背景颜色似乎会渗入正文（页面是一个占位符。我与他们没有任何关系！）：

如您所见，网页下方大约 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 背景渗入身体的背景？

【问题讨论】：

试试body{height:100%;}。这里有更多建议：stackoverflow.com/questions/34591106/setting-body-height-to-100
已经试过了。
你给你的身体设置了高度吗？如果是这样，请将其删除或设置最小高度

标签： javascript html css angularjs

【解决方案1】：

尝试将min-height: 100%添加到body中，同时确保body的内容不是position:absolute或fixed，尝试position:relative作为body内容，使body的大小适应内容大小

【讨论】：

【解决方案2】：

尝试以下方法：

html,body {
height: 100%;
}

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

我假设 #pdfpage 在这种情况下是 PDF 查看器的容器元素。

【讨论】：