minus 20 pixels at top and bottom of div - html

Question

As a bare bones examples I have those 2 really simple divs:
(the green one is inside the red one)
Now how can I subtract 20 pixels from the bottom and the top of the green div?
html:
<div id="container">
<div id="rows">
</div>
</div>
css:
#container {
width: 200px;
height: 300px;
background: red;
}
#rows {
width: 50%;
height: 100%;
/* margin-top: 20px;
margin-bottom: 20px; */
/* padding-top: 20px;
padding-bottom: 20px; */
/* top: 20px;
bottom: 20px;
height: auto; */
background: green;
}
http://jsfiddle.net/clankill3r/2L6c2bLf/1/

Answer 1

Add padding to #container
padding: 20px 0px;
Edit:
as suggested by #Adam you should contain also
box-sizing: border-box;
to stylesheet if you want to preserve box height

Answer 2

Here is a way to do it without adding padding to the parent div or using a calc in the child div.
JSFIDDLE
#container {
width: 200px;
height: 300px;
background: red;
position: relative;
}
#rows {
position: absolute;
width:50%;
top: 20px;
bottom: 20px;
background: green;
}

Answer 3

This may be the solution:
height: calc(100% - 40px);
JSFiddle
Another solution is
padding:20px 0px;
box-sizing:border-box;
for your container. box-sizing:border-box; preserves the height changing of the container.

Answer 4

Here's a solution:
#rows {
width: 50%;
height: 260px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
background: green;
}
http://jsfiddle.net/2L6c2bLf/5/