# Get the height of a div without Jquery **URL:** \ **Category:** uncategorized\ **Created:** [October 24, 2015, 6:52pm UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480 "2015-10-24T18:52:17Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![pierro](https://avatars.discourse-cdn.com/v4/letter/p/ba8739/32.png) [@pierro](https://forum.ionicframework.com/u/pierro)\ **Post date:** [October 24, 2015, 6:52pm UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480/1 "2015-10-24T18:52:17Z")
Hi, I am trying to dynamically set the height for my slides (those being of different height, very common problem…) I want to dynamically set the height of using: ``` on-slide-changed="slideHasChanged($index)" ``` However, I cannot find a single solution that works on the net and this forum to get the height of a div without using jquery. Even the “pure javascript” way (document.getElementById(“div”).offsetHeight;) won’t work. I tried: ``` angular.element(document.querySelector('div')).offsetHeight; angular.element(document.querySelector('div')).height; ``` =\> without success Can anyone help me? Thanks ---
**Author:** ![gensollen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gensollen/32/92854_2.png) [@gensollen](https://forum.ionicframework.com/u/gensollen)\ **Post date:** [October 24, 2015, 7:12pm UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480/2 "2015-10-24T19:12:03Z")
Did you try with a directive ? Like putting a directive on each ion-slide, thus you can fix the height of each slide like this by putting ``` ``` the directive would be named setHeight then. ---
**Author:** ![pierro](https://avatars.discourse-cdn.com/v4/letter/p/ba8739/32.png) [@pierro](https://forum.ionicframework.com/u/pierro)\ **Post date:** [October 24, 2015, 8:12pm UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480/3 "2015-10-24T20:12:02Z")
But I don’t know in advance the height of the div. The height depends on its content, which changes. That’s why I need to dynamically get the height of the div. Thanks for your suggestion. ---
**Author:** ![gensollen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gensollen/32/92854_2.png) [@gensollen](https://forum.ionicframework.com/u/gensollen)\ **Post date:** [October 24, 2015, 10:27pm UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480/4 "2015-10-24T22:27:48Z")
If it depends of its content, you can do it simply in CSS thus. Best, ---
**Author:** ![pierro](https://avatars.discourse-cdn.com/v4/letter/p/ba8739/32.png) [@pierro](https://forum.ionicframework.com/u/pierro)\ **Post date:** [October 25, 2015, 11:55am UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480/5 "2015-10-25T11:55:27Z")
Actually I really can’t do it with css. I fetch data from the database, depending on how much data there is, the scroll will be more or less long. Sometimes it’s half the screen size, which means there is an empty space at the bottom of the page where I can’t swipe left/right to go to the other slide, coz it’s not part of the slide height. That’s why I really need to get the height of the slide dynamically,there must be a way to do the equivalent of jquery $(‘div’).height() ---
**Author:** ![gensollen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gensollen/32/92854_2.png) [@gensollen](https://forum.ionicframework.com/u/gensollen)\ **Post date:** [October 25, 2015, 2:32pm UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480/6 "2015-10-25T14:32:29Z")
> Sometimes it’s half the screen size, which means there is an empty space at the bottom of the page where I can’t swipe left/right to go to the other slide, coz it’s not part of the slide height. I think, this is wrong, I am pretty sure you can set in css the height of the div for being at least 100%, and if it is more you can do a scroll or what you want, or by using ion-pane. (I did something like this for my app, so I know you can do it with simply html and css) ---
**Author:** ![pierro](https://avatars.discourse-cdn.com/v4/letter/p/ba8739/32.png) [@pierro](https://forum.ionicframework.com/u/pierro)\ **Post date:** [October 25, 2015, 4:33pm UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480/7 "2015-10-25T16:33:35Z")
I need to set the height of the based on the height of the ion-slide. So the height of the ion-slide-box depends whether I am on slide 1 or 2 or 3 etc. That’s why I can’t do it with CSS. I just can’t. But to get back on track, is there really no way to get the height of a div using angular / ionic ?? ---
**Author:** ![gensollen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gensollen/32/92854_2.png) [@gensollen](https://forum.ionicframework.com/u/gensollen)\ **Post date:** [October 25, 2015, 5:26pm UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480/8 "2015-10-25T17:26:41Z")
Re, I am sorry but your problem is really unclear, if you can set a codepen, or explain a bit more… ---
**Author:** ![pierro](https://avatars.discourse-cdn.com/v4/letter/p/ba8739/32.png) [@pierro](https://forum.ionicframework.com/u/pierro)\ **Post date:** [October 25, 2015, 7:57pm UTC](https://forum.ionicframework.com/t/get-the-height-of-a-div-without-jquery/35480/9 "2015-10-25T19:57:34Z")
This: > [@Slide-box with different slide heights](http://forum.ionicframework.com/t/slide-box-with-different-slide-heights/11561): > > After a lot of research, I’ve not found a solution yet. The problem seems trivial: a slidebox with 3 slides, each loading dynamic content. Obviously, each slide will have it’s own (dynamic) height. There’s no problem with the dynamic height of slides (adding elements increase the height of the slidebox) but I want each slide to have it’s OWN height. At the moment, each slide gains the height of the major of the 3 slides. Tried $ionicSlideBoxDelegate.update() (which have been removed from la… or this: > [@Slide-box Dynamic Height](http://forum.ionicframework.com/t/slide-box-dynamic-height/2149/2): > > Another small problem, With this code: .controller('ListCtrl', function($scope, EventService,$location,$localStorage, $ionicActionSheet, $translate,$stateParams){ $scope.gotoSlide = function(index) { $scope.$broadcast('slideBox.setSlide', index); }; var slidenum = $stateParams.slidenum; if($stateParams.slidenum\>=0){ $scope.$watch(function(){ $scope.gotoSlide(slidenum); }); } }) I’m getting this error multiplied by the number of pages that I have, TypeError: Cannot read property 'length… are exactly my problem. Except that the first solution uses jquery to get the height. And the second one hides the pages during transitions, which kills the purpose of a slidebox. Again, the problem is that if I have 3 slides, each with unknown height (can’t be defined with css thus), they will all take the height of the biggest slide. (because the whole ion-slide-box will take the biggest height)