如何将容器定位到固定位置？

Question

I have a div where I display next and previous blog post. I have the title in one container (footer_post_title) and the year and "read more button" in another container (footer_post_buttons) underneath. I need to have the second container stay in the bottom of the main container (blog_image_footer) no matter how long the title is in (footer_post_title) . How can I achieve this?

<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

You can set position: relative to the container and position: absolute to its child so you will be able to position your child element taking as reference your parent element.

After that, you can set bottom: 0 to the child so the child will be fixed at the bottom of its container.

.blog_image_footer{
    position: relative;
}

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

Answer 2

You can use this basic principle:

 *{ 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> 

Answer 3

Try using bootstraps grid system: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

This should allow you to make the h1 container responsive.