I'm currently working on calculating the top/bottom padding of a div (.content) based on its height, and updating it upon loading and resizing the window. The goal is to have it centered nicely next to another div (.character) positioned beside it.
Initially, I attempted using CSS calc, but encountered issues as the syntax didn't support operators. Furthermore, my design includes several media queries adjusting the font size according to the viewport, making the height of the .content div somewhat dynamic.
Here is the JavaScript portion for reference, and you can find the current progress on JSFiddle: https://jsfiddle.net/inochiishtal/a9z13fb2/62/
$(function(){
$.w = $(window);
$.w.on('load resize', res);
res();
});
function res() {
$('.content').css('height',($.w.innerHeight()/2)+'px');
}
Any assistance or recommendations would be greatly appreciated. If there's a more effective solution than using innerHTML, I'm open to exploring alternative approaches.