CODEWITHSUNDEEP
javascriptcss
Rocks
Rocks

Reputation: 127

How to get the new size of a dynamically sized div?

I have a div that slides up from the bottom of my pagewhen a button is clicked. i do this using a css transition and changing the css "top" attribute of the div. works fine if the div size never changes. So for example if the div is 400px high, i just move it up 400px and it's now in position. cool.

BUT... what if the div has dynamically generated content and will be a different height every time? how can i figure out how much to move the div up in order to be 100% showing?

so in pseudo code i want something like 

function movemydiv() {

var howMuchToMoveIt = ??? (somehow getting the dynamic containers height)

document.getelementbyId("mydiv").style.top = bottomOfScreen - howMuchToMoveIt

any tips on most straightforward way to do this??

Upvotes: 0

Views: 237

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28593

You can use either clientHeight or offsetHeight to measure the height of your div. Both clientHeight and offSetHeight include padding , but offsetHeight will also take into account borders and horizontal scrollbars (if rendered) - see MDN link.

So your js would be something like:

var howMuchToMoveIt = document.getElementById('mydiv').clientHeight;

The var will then contain the height of your element.

Hope this helps

Upvotes: 1

Related Questions