CSS calc() not working when parent element contains height:100%

Asked Oct 29 '16 at 08:00

Active Oct 29 '16 at 18:07

Viewed 448 times

Here are my code:

<div class="box">
    <div class="test"></div>
</div>

.box {
    height: 100%;
    width: 100px;
    background: red;
}

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

When I set height: 100% then calc() not working properly. But when I set height:500px then calc() works fine.

How it's possible? and how can I solve this bug?

edited Oct 29 '16 at 18:07

Trevor Hickey

36,288
32
162
271

asked Oct 29 '16 at 08:00

RK Infotech

To set a percentage height, its parent element must have an explicit height. (http://stackoverflow.com/a/1622097/1091308) – Niyoko Oct 29 '16 at 08:04
@Niyoko Yuliawan Thank you. But I have make responsive layout using calc() in this case how can I use explicit height? and have you any idea how to solve this issue? – RK Infotech Oct 29 '16 at 08:06
@RkinfotechPhp even with `height: 100%` it should work. Are you sure the grand parent or higher precendence element has height? – Mr_Green Oct 29 '16 at 08:11
@Mr_Green I have set and to height:100% – RK Infotech Oct 29 '16 at 08:16
working fine here https://jsfiddle.net/9uoyko83/ – Mr_Green Oct 29 '16 at 08:31

CSS calc() not working when parent element contains height:100%

0 Answers0