Как выровнять DIV по дну его контейнера?

Question

У меня есть изображение контейнера, внутри которого есть форма.
Я хочу прикрепить форму к нижней части контейнера.
Я могу использовать абсолютное позиционирование, но проблема в том, что есть форма ввода, которая будет расширена при нажатии на опцию «Другое», чтобы показать другой ввод формы. Как всегда выровнять DIV по дну его контейнера?

$(document).ready(function()
{
    $("#Industry").on("change", function()
    {
        if($("#Industry").val() == "Other")
        {
            $("#div-IndustryOther").show();
            $("#frm-section-overview").height($("#frm-section-overview").height() + 50);            
        }                 
        else
        {
            $("#div-IndustryOther").hide();
            $("#frm-section-overview").height($("#frm-section-overview").height() - 50);
        }
    });
});

#bg
{    
    background-image:url(bg.png);
    background-position:0 0;
    height:500px;    
    background-color:yellow;
}    
#frm-container
{
    width:700px;
    position:absolute;
    top:238px;    
    background-color:aqua;
}
#frm-section-overview
{
    min-height:270px;
    width:700px;        
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="container">
    <div id="bg">       
        <div id="frm-container"> 
            <form id="frm-section-overview" action="#" method="post">
                <select id="Industry" name="Industry" style="width:350px;border:1px solid #e0e0e0">
                    <option value="option-1">Option 1</option>
                    <option value="option-2">Option 2</option>
                    <option value="option-3">Option 3</option>
                    <option value="Other">Other</option>
                </select>
                <div id="div-IndustryOther" style="display:none;">
                    <div style="padding-bottom:20px">
                        <label for="IndustryOther" style="display:inline;color:#000;font-weight:normal;text-transform:none">Please enter Other Industry name:</label>
                    </div>
                    <div>
                        <input type="text" name="IndustryOther" id="IndustryOther" value="" style="width:350px"/>
                    </div>
                </div>
                <button type="submit" id="submit"style="display:block;width:350px;">Submit</button>
            </form>
        </div>
    </div>    
</div>

https://codepen.io/anjanesh/pen/XoZjRV

Answer 1

Вы можете использовать свойство абсолютного позиционирования / нижнего css:

#bg
{    
    background-image:url(bg.png);
    background-position:0 0;
    height:400px;    
    background-color:yellow;
    position: relative;
}    
#frm-container
{
    width:700px;
    position: absolute;
    bottom: 0;    
    background-color:aqua;
}

https://codepen.io/anon/pen/LMQRBq

Answer 2

Пожалуйста, выберите мой кодовый указатель: https://codepen.io/anon/pen/gZvweb

#bg
{    
  background-image:url(bg.png);
  background-position:0 0;
  height:500px;    
  background-color:yellow;
  position: relative;
}    
#frm-container
{
    width:700px;
    position:absolute;
    bottom: 0;  
    background-color:aqua;
}
#frm-section-overview
{
    min-height:270px;
    width:700px;        
}

Я добавил относительное положение и основание: 0 к вашей кодовой базе.Это то, что вы искали?