css - 高度 100%，填充底部不起作用

Question

我有以下 - 宽度为 100%、高度为 100% 的 div 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;
}

Answer 1

你可以应用 height:100%;和宽度:100%；在 svg 中:

svg {
  background-color: lightblue;
  height: 100%;
  width: 100%;
}