如何从CSS获取浏览器的高度

Question

I am using scrollbar function in my div tag.

I want to set the scroll bar to my browser height.

I am trying to get the value like this.

javascript

<script>
var height = window.innerHeight;
</script>

css code

    <style>
      .kryesore {
               overflow-y: scroll;
               overflow-y:auto;
               height:height-320px ;
            }
    </style>

here I have created JSFIDDLE code

I want to show the table within the header and footer without browser scrollbar.

the scroll bar should show only in the table that is my requirement.

if I get browser window height I will subtract it by 320. then it will fix my issue and the browser windows scroll bar also not shown so that i want to get the javascript value to css.

can any tell me the correct solution.

Answer 1

You can't reference JS variables through CSS, but you can change CSS with JS.

Try:

JS

document.querySelector('.kryesore').style.height = height;

Answer 2

You can do it via CSS only. I don't know what is your CSS class for scrollbar, thus I'm using scrollbar class.

<style>
  .scrollbar {
           overflow-y: auto;
           height: calc(100vh - 320px);
        }
</style>

100vh is equal to browser's height, calc function can dynamically calculate such CSS values.