Using calc() during calculate height

Question

I programming very simple layout. It consist 5 div -> http://jsfiddle.net/8tSk6/ . I want that div with ID "kubka" equal 100% - 100px (height: calc(100% - 100px);). Unfortunately, it doesn't work. I try apply tips with CSS3 height: calc(100%) not working (add height = 100%,margin & padding = 0), but script still doesn't work.

but height 100% of what element?? the parent www hasn't height — DaniP, Feb 10 '14 at 16:05

score 0 · Answer 1 · answered Feb 10 '14 at 16:15

You could use javascript to get the height of the element and then change it :

function updateHeight(divId){
    var urDiv = document.getElementById(divId);
    urDiv.height = window.innerHeight - 100;
    urDiv.style.height = urDiv.height + "px";
}

Hope it solves your problem.

score 0 · Accepted Answer · answered Feb 10 '14 at 16:17

1) you need to add html {height:100%;}

2) remove the spaces between your div and # - what your styles mean is an id of whatever found inside a div and if you look at your www div it is not inside any other div

If you sort these out i think it will work: fiddle

Using calc() during calculate height

2 Answers2