CSS窗口使用JavaScript的高度

Question

I have some issue with javascript and css...

The problem is that i want to pass the value from javascript to css...

To be more specific i want to get from javascript the window height and pass it to css height in pixels...

Here is my CSS:

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

Is there any solution for that? I am not familiar with javascript and can you be more detailed in you answers :-)

Answer 1

You could do this with only CSS.

Pure css:

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

The vh is the viewport height of the browser window. This is not supported in older versions of IE, so be careful. It is out there though.

Update 10/26/2017: I'd like to add that viewport heights and widths are now widely supported in most all major browsers, with the exception being Opera. Can I Use Viewport Units?

Answer 2

You cannot use Javascript variables directly in the CSS code!

If you are using JQuery there is css() function to modify style of elements. You should do

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

Assuming that TheValueToPass is known before calling code above

Answer 3

I have also find the answer with jquery from "here"

just i modified it for my needs :-)

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

and then u can call class with html statement:

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