Search code examples
javascriptcssinternet-explorer-8polyfills

Various calc() polyfill libraries not working in IE8

I've been asked to create a page with a header and sidebar where the sidebar is 100% the height of the page minus the heading height, without a vertical scrollbar. The following works in FF, Chrome, and IE9+, but the polyfill doesn't do anything in IE8.

I've tried the following 2 polyfill calc libraries in IE8, and neither work. Am I doing something wrong, or do the libraries not work in the given scenario? I've tried loading the script using Modernizr as per the example, as well as loading the script directly at the end of the page without effect.

Code Example:

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="modernizr.custom.js"></script>
        <style>
            body,html{
                height: 100%;
                color: white;
                margin:0;
                padding: 0;
            }
            .heading{
                background:red;
                height: 100px;
            }
            .box{
                background: blue;
                width:200px;
                height: 100%;
                height: calc(100% - 100px);
            }

        </style>

    </head>
    <body>
        <div class="heading">Heading</div>
        <div class="box">Sidebar</div>

        <!--MUST be placed after styles have loaded-->
        <!--<script type="text/javascript" src="./calc.min.js"></script>-->
        <!--<script type="text/javascript" src="./polycalc.js"></script>-->
        <script>
            jQuery(document).ready(function() {
            });
                    Modernizr.load({
                    test: Modernizr.csscalc,
//                    nope: 'calc.js'
                    nope: 'polycalc.js'
                });
        </script>
    </body>
</html>
Solution

  • The CSSParser library is required for the CJKay Polycalc to work. This works in IE7+.

    <!--CSSParser required for CJKay Polycalc
    https://github.com/Schepp/CSS-Filters-Polyfill
    copy following files to: js/css_parser
    - contentloaded.js
    - css-filters-polyfill-parser.js
    - css-filters-polyfill.js
    - cssParser.js
-->
<script>
    var polyfilter_scriptpath = "js/css_parser/";
</script>
<script type="text/javascript" src="js/css_parser/cssParser.js"></script>

<!--
    CJKay Polycalc
    https://codeload.github.com/CJKay/PolyCalc/zip/master
-->
<script type="text/javascript" src="js/polyfill/cjkay-polycalc.js"></script>