ViChU ViChU - 10 months ago 60
AngularJS Question

css height different between pages

I am trying to use

in a page in my application. I also have an
in my home page. I had to alter the
in order to make the autocomplete display perfectly in my home page.

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

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

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
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>
<span class="md-headline">Too Good</span>
<span class="md-subhead">username</span>
<div class="md-media-sm card-media">
<img ng-src="{{review
.imgurl}}" alt="">
<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">
<md-card-actions layout="row" layout-align="end center">

My application url : Home page

The product page : Product page

Please help me fix this css issue.

Answer Source

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

html {
    background: #A6333D;