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

时间:2017-04-06 14:40:14

标签: javascript html css

我在div标签中使用滚动条功能。

我想将滚动条设置为浏览器高度。

我试图获得这样的价值。

的javascript

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

css代码

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

here I have created JSFIDDLE code

我想在没有浏览器滚动条的情况下在页眉和页脚中显示表格。

滚动条应仅显示在我要求的表格中。

如果我获得浏览器窗口高度,我将减去320.然后它将解决我的问题,浏览器窗口滚动条也没有显示,所以我想得到jss值为css。

可以告诉我正确的解决方案。

2 个答案:

答案 0 :(得分:2)

您不能通过CSS引用JS变量,但您可以使用JS更改CSS。

尝试:

<强> JS

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

答案 1 :(得分:2)

您只能通过CSS执行此操作。 我不知道滚动条的CSS类是什么,因此我使用scrollbar类。

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

100vh等于浏览器的高度,calc函数可以动态计算此类CSS值。