Currently, I'm faced with the challenge of fixing the main grid on a website that I am currently working on. My objective is to minimize the use of media queries as much as possible.
I am looking to ensure that the Logo Image maintains the height of the header without scaling down.
Similarly, I want the Timeline Header to retain the width of the Timeline while maintaining its size.
I have experimented with various solutions, but unfortunately, none have been effective for me. Could it be time to consider using JavaScript? (resize)
$(window).resize(function() {
var windowHeight = $(window).height();
var headerHeight = $('div#header').outerHeight(true)
var footerHeight = $('div#footer').outerHeight(true);
var contentHeight = windowHeight - (footerHeight + headerHeight);
var contentMargins = $('div#content').outerHeight(true) - $('div#content').height();
var contentInnerHeight = contentHeight - contentMargins;
$('div#content').height(contentInnerHeight);
}).resize();
If anyone has any insights or suggestions, that would be greatly appreciated. :)
You can find a fiddle showcasing the basic grid layout here: https://jsfiddle.net/hansgohr/62xLfewa/
Additionally, the "full" version of the website can be accessed here: - where the Timeline Header seems to be functioning well.