How to make an html element expand to the top of the page with it's content?

Question

The title pretty much says it all, when there is extra text added to the div it should keep the bottom border of the div at the same spot and the top border should rise as high as necessary to acoomodate the extra text. The width is fixed.
I haven't tried many different things because I just can't find anything similar.

EDIT: the reason I want to do this is because I want to anchor the bottom right corner of an html element on a certain spot in my cesium viewer. At the moment I just fixed the width but I could use the same thing for the width. The bottom right corner should keep it's position next to the entity on the Cesium map.

Answer 1

If you can set a fixed width, you could do it using position: fixed :

 .tooltip { border: 1px solid black; bottom: 10px; padding: 15px; position: fixed; right: 10px; width: 200px; } 

 <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 

Answer 2

Generally, when using absolute positioning, instead of specifying the location with top and left , you can swap out for some combination of bottom and right . When you do this, the coordinates are measured from the other side (the bottom or the right side, respectively), so if you have top-left based coordinates, you must subtract them from the width or height of the area.

Here's a demo . The piece that was modified here looks like this:

    // Set the HTML position to match the entity's position.
    testElement.style.right =
        (viewer.container.clientWidth - position2d.x) + 'px';
    testElement.style.bottom =
        (viewer.container.clientHeight - position2d.y) + 'px';

The rest is the same as this answer , just updated to use right and bottom instead of top and left .