コンテナを固定位置に配置する方法は？

Question

私は次と前のブログ投稿を表示するdivがあります。 1つのコンテナにタイトルがあり、(footer_post_title)ともう1つのコンテナ内の "read more button"が(footer_post_buttons)の下にあります。タイトルがどれくらい長くても、第2コンテナをメインコンテナの底に残す必要があります(footer_post_title)。どうすればこれを達成できますか？

<div class="col-md-6 more-articles-left"> 
    <div class="more-articles previous"> 
     <div class="blog_image_footer"> 
      <div class="row artikkel-title-previous" style="height:100%; background: linear-gradient(24deg, rgba(167, 85, 194, 0.9), rgba(219, 197, 218, 0.9)), url('/files/blog_pictures/o-KID-EATING-facebook.jpg') no-repeat center center /cover"> 
       <div class="container footer_post_title"> 
        <div class="col-md-12"> 
         <h1 class="blog_post_title_footer">How to teach Your kids to eat healthy</h1> 
        </div> 
       </div> 
       <div class="container footer_post_buttons"> 
        <p class="blog_post_year_footer">December 2016</p> 
        <a href="article.php?article_title=how-to-teach-your-kids-to-eat-healthy" class="btn btn-default btn-footer-read-more" name="read-more-article">Read now!</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

position: relativeをコンテナに、position: absoluteをその子に設定すると、親要素を参照として子要素を配置することができます。

その後、bottom: 0を子に設定すると、子はコンテナの下部に固定されます。

.blog_image_footer{ 
    position: relative; 
} 

.footer_post_buttons{ 
    position: absolute; 
    bottom: 0; 
} 

Answer 2

は、ブートストラップグリッドシステムを使用してみてください： http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

これは、あなたがH1コンテナが応答するために許可する必要があります。

Answer 3

あなたはこの基本原理を使用することができます時に、ここで問題が。これが第二の容器（ `footer_post_buttons`）をプッシュする必要がありますいただきました！私は知らない

*{ 
 
    box-sizing: border-box; 
 
} 
 
body, html{ 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
body{ 
 
    display:flex; 
 
    flex-direction: column; 
 
} 
 
#container 
 
{ 
 
    margin: 0 auto; 
 
    width:100%; 
 
    background-color: white; 
 
    border: 0.2em solid black; 
 
    flex-shrink:0; 
 
    flex-grow:1; 
 
    display:flex; 
 
} 
 
#footer,#header 
 
{ 
 
    margin: 0 auto; 
 
    width:100%; 
 
    text-align: center; 
 
    height:1.5em; 
 
    background-color: white; 
 
    border: 0.2em solid black; 
 
    flex-shrink:0; 
 
}

<div id="header"> 
 
header here 
 
</div> 
 
<div id="container"> 
 
this is container 
 
</div> 
 
<div id="footer"> 
 
footer here 
 
</div>