calc运行之后高度显示0

   heml,
    body {
        height: 100%;
    }

    .top,
    .bottom { 
        width: 100%;
        height: 50px;
        background:yellow;
    }

    .middle {
        height:calc(100% - 100px);
        background:black;
    }

运行之后高度一直显示是0，中间的“-”也加了空格,

html 也设置 100% 写成 heml了