Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

set css height to a div, using all available screen space left over JavaScript

  • SOLVED

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.

<script>
$(document).ready(function() {
$('#skyfall').css("height", Math.floor(window.innerHeight * 0.57) +"px");
});


//console.log ((screen.height / 16) * (0.5) +"rem"));
</script>

<script>

$(document).ready(function() {
var heights = window.innerHeight;
document.getElementById("skyfall").style.height = (heights * 0.55) + "px";});

</script>

Answers (1)

2019-01-12

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.


$(document).ready(function() {

// 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.


User180435 comments:

https://verlager.com/

Your code didn't resize the #skyfall


Rainner Lins comments:

That site you linked is asking for login info.