CSS高度之间的高度不同

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>

我的应用程序URL：主页

产品页面：产品页面

请帮助我修复此CSS问题。

Answer 1

给予HTML的背景颜色或删除身体的height: 100%;。指定min-height不需要。

html {
    background: #A6333D;
}

Answer 2

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

这将完成技巧：）