0

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

Rocks
  • 107
  • 2
  • 12
  • This might help https://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript – Sohel Jul 27 '19 at 10:18
  • consider posting your `HTML` structure and the `JavaScript` part that assigns a dynamic size to the `div`. – ThS Jul 27 '19 at 10:19

1 Answers1

1

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

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
  • As alternative could also use [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). – maioman Jul 27 '19 at 10:26