Categories
Mastering Development

How to calculate height between the very top of a div and bottom: 0

I want to be able to place a div on top are under another div. With the example in the image i have two divs. The first one is postioned with right: 10px; and bottom: 10px;. I want to be able to position the second div in the same way, but so bottom is 10px higher than the very top of the first div. To do that dynamically I need to have the height difference between the very top of the first div and bottom: 0.

How can I get that with JavaScript or JQuery?

enter image description here

<div class="div1">This is the first div</div>
<div class="div2">This is the second div</div>
.div1 {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-block;
    padding: 10px;
    background-color: #990;
}
.div2 {
    display: inline-block;
    padding: 10px;
    background-color: #099;
    //position: absolute;
    //right: 10px;
    //bottom: ...;
}

Leave a Reply

Your email address will not be published. Required fields are marked *