Animate jQuery height percentage

Question

When I'm trying to animate percentage, it's not animating, but expanding to whole height instantly. I want it to expand to 100%, but smoothly

CSS:

#block-views{
overflow:hidden;
height:20px;
}

HTML:

<div id="block-views">
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    7<br/>
    8<br/>
    9<br/>
    10<br/>
</div>
<a href="#" class="loadmore">Load more</a>

Jquery code:

$(function() {
    $( ".loadmore" ).toggle(
        function() {
            $( "#block-views" ).animate({
                height: "20px",
            }, 1000 );
        },
        function() {
            $( "#block-views" ).animate({
                height: "100%",
            }, 1000 );
        }

    );
});

When I click on load more, it expands to 100% instantly, not smoothly, but when I click on it second time, it decreases size to 20 px smoothly. I tried to watch expanding process in Chrome's inspector tool and I can clearly see that percentage is adding smoothly, but numbers aren't integers, and Chrome doesn't seem to recognize it. How can I solve this?

Solution

I think the CSS percentage value is upon the parent node.

so if you want to make this possible you want to add div parent node and set the height off the parent node that i take an example in jsFiddle