2014-07-03 3 views
2

Меня попросили создать страницу с заголовком и боковой панелью, где боковая панель на 100% высота страницы за вычетом высоты заголовка, без вертикальной полосы прокрутки. Следующие функции работают в FF, Chrome и IE9 +, но polyfill ничего не делает в IE8.Различные библиотеки библиотек calc(), которые не работают в IE8

Я пробовал следующие 2 библиотеки полифонических вычетов в IE8, и ни одна из них не работает. Я что-то делаю неправильно, или библиотеки не работают в данном сценарии? Я попытался загрузить сценарий с помощью Modernizr в соответствии с примером, а также загрузить скрипт непосредственно в конце страницы без эффекта.

Пример кода:

<!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> 
+1

Это не отвечает на ваш конкретный вопрос, но вы можете использовать абсолютное позиционирование для достижения этого макета с почти универсальной поддержкой браузера. – Shmiddty

+1

Чтобы начать отвечать на ваш реальный вопрос, есть ли сценарий или ошибки ресурса, когда ваша страница загружается? – Shmiddty

ответ

3

Библиотека CSSParser требуется для CJKay Polycalc работать. Это работает в 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>