Почему высота: calc (100% - 100px) не работает

Question

JsFiddle Я пытаюсь установить высоту тестового div как calc (100% -100px). почему он не работает.

.test { 
    height: calc(100%-100px); 
} 

Answer 1

Почему существует множественный height стили CSS для #wrap?

Try взлетает height: auto !important;

http://jsfiddle.net/UaYfW/53/

Answer 2

Операторы + и - требуют пробелы до и после. Попробуйте calc(100% - 100px). Оператор * вам не нужен пробел ex. calc(100%(1/15))

Answer 3

ниже код поможет вам зафиксировать высоту в Div .div {высота: известково (100% - (20px + 30px));} рабочий код, как показано ниже:

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 
} 

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> 

Рабочий пример: http://jsfiddle.net/UF3mb/603/

Answer 4

вы можете использовать 100vh вместо 100%. vh = 1% от высоты окна просмотра.

.test { 
    height: calc(100vh - 100px); 
}