css height:100% for childs made over flow abnormally

css height:100% for childs made over flow abnormally

hi i would like to make full height for a left and side bars i must be
100% height but it made a little buggy my css looks like
html{
height: 100%;
min-height: 100%;
}
body{
height: 100%;
}
.container{
background-color: #999;
padding: 20px;
height:100%;
}
.sidebar{
background-color: #9999ff;
float:left;
width:30%;
height:100%;
}
.content{
background-color: #99ff99;
float:left;
width:70%;
height:100%
}
this is my fiddle
demo
if i did height:100% for childs means most of the contents are get
overflowed.