jQueryを使用してCSSの枠線を制御する

Question

divの枠線を追加しようとしていますが、内側に他のdivがあります。私は特定のdivまで国境を終了したい。サンプルコードは以下の通りです。実際のテンプレートを編集できないので、これを解決するためのjQuery/CSSソリューションを探しています。特定のCSSクラスを使用して枠線を追加することはオプションですが、セクション間のギャップや枠線が欠落するため、完璧な解決策ではありません。

$(".article-content") 
 
    .css("border", "2px red solid") 
 
    .find("#beforeFooter") 
 
    .end();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="article-content"> 
 
    <div class="article-title">Title</div> 
 
    <div class="article-share">Share tools</div> 
 
    <p><span>Hello</span>, how are you?</p> 
 
    <p><span>Hello</span>, your name?</p> 
 
    <p><span>Hello</span>, your age?</p> 
 
    <p>Ends here</p> 
 
    <div id="beforeFooter"><img src="https://via.placeholder.com/600x150" /></div> 
 
    <div class="article-footer">Some other footer content</div> 
 
</div>

Answer 1

1つのオプションは、オフセットそれに.article-contentの高さを設定し、その後#beforeFooter要素（それは.article-content要素の先頭からのオフセットだ画素数）のオフセットを取得することです。

var beforeFooterPosition = $("#beforeFooter").position(); 
$(".article-content").height(beforeFooterPosition.top); 

ここでは動作例を示します。境界線が正しい場所に来るように、さらに18ピクセルを引く必要がありました。目的の効果を得るには、その番号を試してみることをお勧めします。複数の境界線があるだろうか、一度にただ1つの境界があるでしょう意味、あなたは国境がするまで、拡張場所を制御できるようにしたい

var beforeFooter = $("#beforeFooter").position(); 
 
$(".article-content").height(beforeFooter.top - 18);

.article-content { 
 
    border: 2px solid red; 
 
    overflow: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="article-content"> 
 
    <div class="article-title">Title</div> 
 
    <div class="article-share">Share tools</div> 
 
    <p><span>Hello</span>, how are you?</p> 
 
    <p><span>Hello</span>, your name?</p> 
 
    <p><span>Hello</span>, your age?</p> 
 
    <p>Ends here</p> 
 
    <div id="beforeFooter"><img src="https://via.placeholder.com/600x150" /></div> 
 
    <div class="article-footer">Some other footer content</div> 
 
</div>