CSS3 height: calc (100%) не работает

У меня есть div, который я хочу заполнить всей высотой тела за вычетом заданного числа в пикселях. Но я не могу получить высоту: calc (100% - 50px), чтобы работать.

(Причина, по которой я хочу это сделать: у меня есть элементы с динамическими высотами, основанные на некоторых разных критериях, например высота изменений заголовка, основанная на разных элементах, которые он может содержать. Затем необходимо разделить содержимое div, чтобы заполнить остальные доступного свободного места.)

Однако элемент div сохраняет высоту содержимого - он не выглядит так, как будто он интерпретирует 100% как высоту элемента body.

HTML

<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>

CSS

body {background: blue; height:100%;position:relative;}
header {background: red; height: 20px; width:100%}
h1 {font-size:1.2em; margin:0; padding:0; height: 30px; font-weight: bold; background:yellow}
#theCalcDiv {background:green; height: calc(100% - (20px + 30px + 20px)); display:block}

Смотрите скрипту: http://jsfiddle.net/ElizabethMeyer/UF3mb/.

Я был бы признателен за любую помощь или указатели в правильном направлении.

Ответ 1

Вам необходимо убедиться, что html и body установлены на 100%, а также обязательно добавьте префиксы поставщиков для calc, поэтому -moz-calc, -webkit-calc.

Следующие работы CSS:

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
header {
    background: red;
    height: 20px;
    width:100%
}
h1 {
    font-size:1.2em;
    margin:0;
    padding:0;
    height: 30px;
    font-weight: bold;
    background:yellow
}
#theCalcDiv {
    background:green;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

Я также установил ваш margin/padding равным 0 на html и body, иначе в этом случае будет полоса прокрутки.

Здесь обновленная скрипка

http://jsfiddle.net/UF3mb/10/

Поддержка браузера: IE9 +, Firefox 16+ и с префиксом поставщика Firefox 4+, Chrome 19+, Safari 6 +

Ответ 2

Прежде всего - проверьте с Firebug (или, что вы предпочитаете), интерпретируется ли свойство css браузером. Иногда используемый инструмент дает вам проблему прямо там, поэтому больше не нужно охотиться.

Второе - проверьте совместимость: http://caniuse.com/#feat=calc

И в-третьих, я столкнулся с некоторыми проблемами несколько часов назад и просто решил это. Это самая маленькая вещь, но она заставляла меня заняться в течение 30 минут.

Вот как выглядел мой CSS

#someElement {
    height:calc(100%-100px);
    height:-moz-calc(100%-100px);
    height:-webkit-calc(100%-100px);
}

Выглядит правильно, не так ли? НЕПРАВИЛЬНО Вот как это должно выглядеть:

#someElement {
    height:calc(100% - 100px);
    height:-moz-calc(100% - 100px);
    height:-webkit-calc(100% - 100px);
}

Выглядит так же верно?

Обратите внимание на пробелы!!! Проверенный браузер для Android, Firefox для Android, Chrome для Android, Chrome и Firefox для Windows и Internet Explorer 11. Все они игнорировали CSS, если не было пробелов.

Надеюсь, это поможет кому-то.

Ответ 3

попробуйте установить как html, так и body на высоту 100%;

html, body {background: blue; height:100%;}

Ответ 4

Все родительские элементы в иерархии должны иметь высоту 100%. Просто дайте max-height: 100% для элемента и max-height: calc (100% - 90px) для непосредственного родительского элемента.

Он работал и на IE.

html,
body {
    height: 100%
}

parent-element {
    max-height: calc(100% - 90px);
}

element {
    height:100%;
}

Рендеринг в IE не выполняется из-за сбоя Calc при изменении размера окна или данных, загруженных в DOM. Но этот метод, упомянутый выше, работал у меня даже в IE.

Ответ 5

Вам ничего не нужно вычислять, и, вероятно, не следует:

<!DOCTYPE html>
<head>
<style type="text/css">
    body {background: blue; height:100%;}
    header {background: red; height: 20px; width:100%}
    h1 {font-size:1.2em; margin:0; padding:0; 
        height: 30px; font-weight: bold; background:yellow}
    .theCalcDiv {background-color:green; padding-bottom: 100%}
</style>
</head>
<body>
<header>Some nav stuff here</header>
<h1>This is the heading</h1>
<div class="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.
</div>

Я собрал все это для краткости.

Ответ 6

Если вы ставите calc в проекте GWT, его синтаксический анализатор может не проанализировать вычет для вас, как это было не для меня... , чтобы обернуть его в листинг css следующим образом:

height: literal("-moz-calc(100% - (20px + 30px))");
height: literal("-webkit-calc(100% - (20px + 30px))");
height: literal("calc(100% - (20px + 30px))");

Ответ 7

Calc теперь хорошо поддерживается, и добавление единиц видового экрана делает это проще. Решение, используемое с помощью модулей vh, должно работать хорошо, вы можете настроить тело на высоту автоматически, просто убедитесь, что отображен экран CalcDiv: block

body {background: blue; height:100%;}
header {background: red; height: 20px; width:100%}
h1 {font-size:1.2em; margin:0; padding:0; 
    height: 30px; font-weight:bold; background:yellow}
#theCalcDiv {background:green; 
    min-height:calc(100vh - (20px + 30px)); 
    display:block}