how to fix width of child div tag

Question

I have two div tags parent and child. The child tag has a position fixed with a width of 100%. The parent has a padding of 10px as shown in this jsfiddle code. The issue is that when I give a width of 100% to the child tag then its right side moves out of the parent div tag. I know that is because it has padding. One way to solve this is to give the child tag a width of 90%.

But is there a better way than this so that the child tag appears exactly inside the parent tag?

UPDATE

I want to keep position: fixed for child tag

.parent {
    height: 300px;
    padding: 10px;
    border: 1px solid red;
}

.child {
    position: fixed;
    height: 100px;
    width: 100%;
    border: 1px solid black;
}

Answer 1

jsfiddle.net/q4ffs/3/ DEMO

If you are comfortable with a little use of jQuery then this should fix your issue. CSS still have some limitations but this little line of javascript may serve you well.

  $(function (){
      $('.child').each(function (){
          $(this).css('width', $(this).parent('div').width());
      })
  });

Thanks