は動的なコンテンツを下に

Question

を段落スティックを作るだから私はこのように見えるウェブサイト上のいくつかのブロックを持っている：

お互いに次の3つのブロックがあります。ここで問題となるのは、titleは画像のように長さが1行で、長さが4行であるということです。タイトルの長さによっては、コンテンツを正常に変更するので、コンテンツはブロック内にとどまり、オーバーフローしません。

ただし、コンテンツとタイトルの長さにかかわらず、3つのブロックすべてのボタンは同じ高さにある必要があります。私はそれらをブロックの底に貼り付けることができると思ったので、すでに親にposition: relative、子供にはposition: absoluteを与えましたが、彼らはちょうど底に固執したくない、彼らはまだ異なる高さに登場しました。私もdisplay: flexとposition: fixedとだまされましたが、私はこの作業をすることができませんでした。

もちろん、タイトルの高さなどに応じてjQueryでブロックの位置を管理できますが、パフォーマンスのために可能な限り少ないJavaScriptを使用したいと考えています。

ブロックごとにHTMLは次のとおりです。

<div class="post-content"> 
    <div class="post-header"> 
     <span class="cat"><a href="some-url" title="some-title">Here goes the category</a></span> 
     <h2><a href="some-url">Here goes the title</a></h2> 
     <span class="date">1 january 1970</span> 
    </div> 

    <div class="post-entry"> 
     <p>This is the content of the post</p> 
     <p><a href="some-url" class="more-link"><span class="more-button">Read more link</span></a></p> 
    </div> 
</div> 

そうなど、

を私はまた、CSSを投稿することができ、それは単にいくつかの背景のプロパティよりも多く含まれていない、テキストのパディング私が必要とするのはタイトルやコンテンツの長さにかかわらず、ボタンは常に底に粘着している必要があります。

ありがとうございます！

Answer 1

問題は（コメントで議論した後で）position: relative;が外側コンテナpost-contentの代わりにpost-entryに設定されていることです。変更すると、他のルールが正しく設定されている限り、問題は修正されます。