Меня попросили создать страницу с заголовком и боковой панелью, где боковая панель на 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>
Это не отвечает на ваш конкретный вопрос, но вы можете использовать абсолютное позиционирование для достижения этого макета с почти универсальной поддержкой браузера. – Shmiddty
Чтобы начать отвечать на ваш реальный вопрос, есть ли сценарий или ошибки ресурса, когда ваша страница загружается? – Shmiddty