css - Border percentage width

Question

is there any option set pseudo element(:before) border width(height) same as container(with fluid height) height without px units?

html:

<div id="container">
test
</div>

css:

#container{
    width:50%;
    height:300px; /**without*/
    margin:0 auto;
    position:relative;  
}

#container:before{
    height:100%;
    width:auto;
    position:absolute;
    border-top: 300px solid #05ed08; /**without px*/
    border-left: 45px solid transparent;
    border-right: 45px solid transparent; 
    content:"";    
    right:-45px;
    left:-45px;
    z-index:-1;
    top:0;
    bottom:0;
}

fiddle: http://jsfiddle.net/3pqFE/5/

Answer 1

Try this jQuery solution, based on your first jsfiddle:

HTML:

<div id="container">
<div class="test"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae?
</div>

CSS:

#container{
    width:50%;
    margin:0 auto;
    position:relative;
    padding: 5px;
}

.test{
    height:100%;
    width:auto;
    position:absolute;
    border-top: 300px solid #05ed08;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;   
    right:-45px;
    left:-45px;
    z-index:-1;
    top:0;
    bottom:0;
}

jQuery:

var divHeight = $('div#container').height() + 10;

$('#container').css('height', divHeight+'px');
$('.test').css('border-top', divHeight+'px solid #05ed08');

Demo: http://jsfiddle.net/UrTLU/3/

Note: Try adding content for seeing increasing of height.