使用 JavaScript 的 CSS 窗口高度答案

【问题标题】：CSS window Height with JavaScript使用 JavaScript 的 CSS 窗口高度
【发布时间】：2017-10-27 10:43:47
【问题描述】：

我有一些关于 javascript 和 css 的问题...

问题是我想将值从 javascript 传递给 css...

更具体地说，我想从 javascript 中获取窗口高度并将其传递给以像素为单位的 css 高度...

这是我的 CSS：

.fulframe {
    position: relative;
    width: 100%;
    height: TheValueToPass;
    overflow: hidden
}

有什么解决办法吗？我不熟悉 javascript，你能在你的答案中更详细:-)

【问题讨论】：

标签： javascript jquery html css height

【解决方案1】：

你可以只用 CSS 来做到这一点。

纯CSS：

.fulframe {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden
}

vh 是浏览器窗口的视口高度。旧版本的 IE 不支持此功能，因此请小心。但它就在那里。

2017 年 10 月 26 日更新：我想补充一点，大多数主流浏览器现在都广泛支持视口高度和宽度，Opera 除外。 Can I Use Viewport Units?

【讨论】：

【解决方案2】：

您不能直接在 CSS 代码中使用 Javascript 变量！

如果您使用的是 JQuery，则有 css() 函数来修改元素的样式。你应该这样做

    $( document ).ready(function() {
            $(".fulframe").css("height", TheValueToPass);
    });

假设 TheValueToPass 在调用上面的代码之前是已知的

【讨论】：

【解决方案3】：

我也从"here"找到了jquery的答案

只是我根据自己的需要修改了它:-)

<script>

        function jqUpdateSize(){
            // Get the dimensions of the viewport
            var width = $(window).width();
            var height = $(window).height();

            $('#jqWidth').html(width);
            $('#jqHeight').html(height);

            $('.test').css({ position: "relative",
            width: $(window).width(),
            height:  $(window).height(),
            overflow:" hidden"});

        }
        $(document).ready(jqUpdateSize);    // When the page first loads
        $(window).resize(jqUpdateSize);     // When the browser changes size


    </script>

然后你可以用html语句调用类：

<div class="test" >heloo
    <p>
        <strong>jQuery resize:</strong>
        <span id="jqWidth"></span>,
        <span id="jqHeight"></span>
    </p></div>

【讨论】：