-1

疑似要素(:before)境界線の幅(高さ)をコンテナ(流動的な高さ)の高さと同じにpx単位なしで設定するオプションはありますか?

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;
}

フィドル: http://jsfiddle.net/3pqFE/5/

4

1 に答える 1

1

最初のjsfiddleに基づいて、この jQuery ソリューションを試してください。

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');

デモ: http://jsfiddle.net/UrTLU/3/

注: 高さの増加を確認するためのコンテンツを追加してみてください。

于 2013-08-02T11:08:37.730 に答える