マイナスpxをプラグインに追加するにはどうすればよいですか？

Question

私は例えば、私のdivを等しくするためにプラグインを使用しています：matchheight jquery pluginと私はほぼ欲しいもの作り、あなたが私のデモで見るように、私の2つのdivが同じであるが、私は少しの特定を作りたい：

私.b divは.a divより短くなければなりません。たとえば、-15pxや-10pxなどです。私の質問はどのようにカスタム-pxを追加できますか？

$('.b').matchHeight({ 
 
     target: $('.a') 
 
    });

.a,.b{ 
 
color:#fff; 
 
padding:10px; 
 
width:100px; 
 
overflow:hidden; 
 
float:left; 
 
margin:5px; 
 
} 
 
.a{ 
 
background:red; 
 
} 
 
.b{ 
 
background:orange; 
 
}

<div class="a"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div> 
 
<div class="b"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
</div> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

Answer 1

あなたは、おそらくプラグインは高さを調整していた後、あなたの「B」の要素を調整する必要があります。したがって、更新後にコールバック関数でその処理を行う必要があります。

$.fn.matchHeight._afterUpdate = function(event, groups) { 
    $('.b').height(function(){ return $('.b').height() - 10; }); 
} 

Answer 2

スクリプトを書き換える場合を除き、あなたは偽物このborderとbackground-clipとCSSでの可能性があります：

border-bottom:solid 10px/* set you size here */ transparent /* lets see through it */; 
background-clip:padding-box;/* keep background away from the border */ 

$('.b').matchHeight({ 
 
    target: $('.a') 
 
});

.a, 
 
.b { 
 
    color: #fff; 
 
    padding: 10px; 
 
    width: 100px; 
 
    overflow: hidden; 
 
    float: left; 
 
    margin: 5px; 
 
    box-shadow:inset 0 0 0 3px black; 
 
} 
 

 
.a { 
 
    background: red; 
 
} 
 

 
.b { 
 
    background: orange; 
 
    border-bottom: solid 15px transparent; 
 
    background-clip: padding-box; 
 
} 
 

 
body { 
 
    background: gray 
 
}

<div class="a"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. 
 
</div> 
 
<div class="b"> 
 
    Lorem ipsum dolor sit amet 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

Answer 3

jqueryのを使用している場合、あなたは高さメソッドを使用することができます（またはcssメソッド）を使用して高さの値を取得および設定し、純粋なJavaScriを使用して10または15ピクセルを引く実際の計算を行いますpt。 純粋なCSSとHTMLを使用する場合は、CSSのcalc機能を使用することもできますが、一部のブラウザではサポートされていません。

場合によっては（つまり、境界線を含む高さを等しくしようとすると）、box-model：border-boxも役立ちます。