高度100％，底部填充不起作用

我有以下内容-一个div，其宽度为100％，高度为100％，div内为svg，宽度为100％，高度为100％（默认情况下）

我将填充应用于div。左，右和顶部填充起作用，但底部不起作用，有什么想法吗？

http://codepen.io/BradLee/pen/EKerpY

<div>
    <svg viewBox="0 0 100 100"></svg>
</div>

div {
    box-sizing: border-box;
    background-color: tomato;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5px;
}

svg{
    background-color: lightblue;
}