How to give dynamically height to div in angularjs?

Question

Could you please tell me how to give dynamically height to div in angularjs? Actually i have one scrolling div (have content in that ). When I give 100px height, I am able to see all the content.

But I need to give height to that div (window -header -footer)

<ion-scroll direction="y" style="height: 100px">
    <div class="row" ng-repeat="obj in data.data">
        <div class="col">
          {{obj.schDepart}}
        </div>
        <div class="col">
          {{obj.expDepart}}
        </div>
    </div>
</ion-scroll>

Here is my code: http://codepen.io/anon/pen/ZGEpMN

Need to give height to <ion-scroll total height -footer -header height dynamically so that it will run on all windows.

You can do this with css: height: calc(100vh - FOOTERpx - HEADERpx) — mrak
– mrak, Commented Apr 23, 2015 at 10:28
From what I see you have also style with height property on the ion-scroll which wins against the css selector — mrak
– mrak, Commented Apr 23, 2015 at 10:32
you can remove that sytle property .and that is also static value 100 px.I need to add dynamically so that it will run for all screen resolution — user944513
– user944513, Commented Apr 23, 2015 at 10:34

Jay Shukla · Accepted Answer · 2015-04-23 10:35:59Z

1

As mrak said, you can do with calc like below:

ion-scroll[direction=y] {
  height: calc(100vh - 88px);
}

I can see your header and footer both have 44px height so I used 88px here.

Updated Codepen

answered Apr 23, 2015 at 10:35

Jay Shukla

5,8368 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user944513 Over a year ago

I think it will not work for all resolution .because on small resolution the header and footer height decrease .I need such solution which run on all resolution

Jay Shukla Over a year ago

Then you can write media queries for that specific resolution and replace header and footer height based on the resolution.

Jay Shukla Over a year ago

It can be. I'm not sure but you are good to go with media queries.

Collectives™ on Stack Overflow

How to give dynamically height to div in angularjs?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related