Looking to lock a text element to the baseline while also resizing its font dynamically when the window is resized.
I created a demonstration on jsfiddle. However, the issue arises when the window size changes; the distance from the bottom of the window is not consistent.
<div class="foo">text</div>
<script>
var onResizeFunction = function() {
var newFontSize = Math.floor(0.2 * $(window).width());
$(".foo").css("font-size", newFontSize);
};
onResizeFunction();
$(window).resize(function() {
onResizeFunction();
});
</script>
In an attempt to resolve this issue, I added the following code:
.foo {
position:fixed;
bottom: 0;
}
The main problem seems to be the "hitbox" of the text element. Is there a clever css workaround or trick that anyone knows?
This functionality is within angular, so no advanced jQuery solutions are possible ;)
EDIT:
The concern is the consistency of the distance from the bottom of the text element to the bottom of the window.