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

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

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

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

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

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

источник

2013-04-23 elizabethmeyer

Заметим, что 'calc' не поддерживается в [все] (HTTP: // caniuse .com/calc), например сафари и браузер по умолчанию для Android. – Aquillo

@Aquillo '-webkit-calc()' поддерживается в последних версиях Safari и Safari на iOS –

Я только что заметил, что с помощью Safari 6 вы правы, Дэвид. – Aquillo

Вы должны обеспечить HTML и тела устанавливаются на 100%, а также не забудьте добавить префиксы для известково, так -moz-известково, -webkit-известково.

После 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 
}

Я также установить маржу/отступы 0 на HTML и тела, в противном случае не было бы, когда полоса прокрутки это добавлено.

Вот обновленный скрипку

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

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

источник

2013-04-23 08:56:41 daamsie

Это сработало отлично, спасибо! – elizabethmeyer

Я искал это, спасибо! '-moz-calc' и' -webkit-calc' нужны! – Gibberish

На самом деле не требуется, чтобы html и body были установлены на высоту 100%. Это просто, если вы хотите высоту 100%, если содержащиеся элементы не такие высокие, как вы хотите, это будет только 100% высоты содержащихся элементов. Если ваши единственные содержащиеся элементы - это тело и html, тогда нет смысла использовать 'calc', просто используйте' height: 100% ' –

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

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

источник

2013-04-23 08:49:21

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

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

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

источник

2013-04-23 09:23:12 msw

Мне нужен calc() - очевидно, пример - это просто макет, а не более сложный проект У меня проблема. То, что могло вызвать путаницу, состоит в том, что у меня есть липкий нижний колонтитул, а также нужно, чтобы содержимое div растягивалось между верхним и нижним колонтитулом, независимо от устройства, на котором просматривается сайт. – elizabethmeyer

@elizabethmeyer спасибо за разъяснение – msw

Прежде всего - проверьте с 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, если не было пробелов.

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

источник

2015-11-13 13:56:21 Kickass

Да, ** обратите внимание на пробелы !!! ** Я потратил часы, пытаясь заставить это работать в Chrome только для того, чтобы узнать вопросы о расстоянии. – JDawg

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

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

источник

2015-12-29 08:58:47 cellepo

Все родительские элементы в иерархии должны иметь высоту 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.

источник

2016-02-11 12:31:24 Manas

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

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}

источник

2017-03-17 08:21:00

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

ответ

Смежные вопросы