height 100%, padding-bottom not working

0
votes

I have the following - a div with width: 100%, height: 100%, an svg inside the div, width: 100%, height: 100% (by default)

I apply padding to the div. Left, right and top padding work but bottom doesn't, any ideas?

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;
}
2
css

2 Answers

0
votes

Add "overflow-y: scroll; " to your div css, svg height is more than your viewport height so you need to scroll to view bottom area.

0
votes

You can apply height:100%; and width:100%; in svg:

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