Question

我正在尝试在我的应用程序的页面中使用md-card。我的主页上也有一个md-autocomplete。我必须更改angular-material.css才能在我的主页上完美地显示自动完成显示。

但是在我使用md-card的产品页面中，它显示不正确。

这是使产品页面显示不正确的css：

body,
html {
    height: 100%;  ----> This makes the page incorrect.
    position: relative
}

删除高度会使其他页面不正确，但产品页面正确无误。因此，我需要在其他页面中使用height属性才能正确显示它们。

以下是md卡代码：

<div class="container ">
  <!-- <div style="margin-top: 5%" flex-sm flex-gt-sm="100" ng-repeat="review in reviews"> -->
  <div style="margin-top: 5%" ng-repeat="review in reviews">
    <md-card ng-repeat="review in reviews" md-theme="dark-grey" md-theme-watch>
      <md-card-title>
        <md-card-title-text>
          <span class="md-headline">Too Good</span>
          <span class="md-subhead">username</span>
        </md-card-title-text>
        <md-card-title-media>
          <div class="md-media-sm card-media">
            <img ng-src="{{review
    .imgurl}}" alt="">
          </div>
        </md-card-title-media>
      </md-card-title>
      <md-card-content class="col-md-11">
        <hm-read-more hm-text="{{text}}" hm-limit="100" hm-more-text="read more" hm-less-text="read less" hm-dots-class="dots" hm-link-class="links">
        </hm-read-more>
      </md-card-content>
      <md-card-actions layout="row" layout-align="end center">
        <md-button>Like</md-button>
        <md-button>Dislike</md-button>
      </md-card-actions>
    </md-card>
  </div>
</div>

我的申请网址：Home page

产品页面：Product page

请帮我解决这个问题。

Answer 1

body, html {
    height: auto;
    min-height: 100vh !important;
}

这样可以解决问题：）

Answer 2

为html提供背景颜色或删除正文的height: 100%;。指定min-height不必要。

html {
    background: #A6333D;
}

页面之间的CSS高度不同

2 个答案: