высота 100%, прокладка-нижняя не работает

Question

У меня есть следующее: a div с шириной: 100%, высота: 100%, a svg внутри div, ширина: 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

Вы можете применить высоту: 100%; и ширина: 100%; in svg:

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

Answer 2

Добавить «переполнение-у: прокручивать;» к вашему сНу CSS, высота SVG больше, чем ваша высота окна просмотра, так что вам нужно для прокрутки, чтобы просмотреть нижнюю область.