Question

是否有任何选项设置伪元素（：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/

Answer 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/

注意：尝试添加内容以增加身高。

边界百分比宽度

1 个答案: