ViChU ViChU - 9 days ago 5
AngularJS Question

css height different between pages

I am trying to use

md-card
in a page in my application. I also have an
md-autocomplete
in my home page. I had to alter the
angular-material.css
in order to make the autocomplete display perfectly in my home page.

But in my product page where I use
md-card
, it does not appear properly.

This is the css that makes the product page appear incorrect :

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


Removing the height makes the other pages incorrect but the product page correct. Hence I need the
height
attribute in my other pages to display them correctly.

The below is the md-card code:

<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>


My application url : Home page

The product page : Product page

Please help me fix this css issue.

Answer

Give background colour to html or remove the height: 100%; for body. Specifying min-height not necessary.

html {
    background: #A6333D;
}