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

Question

我有以下 - 一个宽度：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;
}

Answer 1

将“overflow-y:scroll;”添加到您的 div css，svg 高度大于您的视口高度，因此您需要滚动查看底部区域。

Answer 2

您可以应用高度：100%；和宽度：100%；在 svg 中：

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