I want to set css height to a div, using all available screen space left over after a few header items.
No scrolling should be necessary.
Got to work on ALL screen heights. The code below is close, but not close enough.
$('#skyfall').css("height", Math.floor(window.innerHeight * 0.57) +"px");
//console.log ((screen.height / 16) * (0.5) +"rem"));
var heights = window.innerHeight;
document.getElementById("skyfall").style.height = (heights * 0.55) + "px";});
Rainner Lins answers:
Sounds like you need to check the height of the header area and then subtract it from the window height to get the size you need for your div, try something like this, make sure your header has an ID.
// get header by id and info about it's size
let header = document.querySelector( '#header' );
let headerBox = header.getBoundingClientRect();
// get other div by id and apply height to it
let skyfall = document.querySelector( '#skyfall' );
skyfall.style.height = Math.floor( window.innerHeight - headerBox.height ) + 'px';
It's hard without seeing what you see but sounds like what you need, give it a shot.
Your code didn't resize the #skyfall
Rainner Lins comments:
That site you linked is asking for login info.