頁面之間的css高度不同

我想在我的應用程序的頁面中使用md-card。我的主頁也有一個md-autocomplete。我必須更改angular-material.css才能在我的主頁中完美顯示自動完成顯示。頁面之間的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

請幫我解決這個問題的CSS。

來源

2016-11-30 v1shnu

給背景顏色爲HTML或刪除height: 100%;身體。沒有必要指定min-height。

html { 
    background: #A6333D; 
}

來源

2016-11-30 05:39:37

是的，這工作。謝謝：） – v1shnu

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

這將這樣的伎倆:)

來源

2016-11-30 05:37:26 Ishara

本作的產品頁面右側。但其他網頁弄亂了。 – v1shnu

當您只需將最小高度：100vh添加到您的頁面時，樣式會被覆蓋。使用！重要，而不是像在更新的答案中。 – Ishara

頁面之間的css高度不同

回答

相關問題