如何将DIV对准其容器的底部？

Posted 2021-04-07

我有一个容器图像，里面有一个表单。 我希望将表单固定在容器的底部。 我可以使用绝对定位，但问题是，有一个表单输入，将在单击“其他”选项时展开，以显示另一个表单输入。如何将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

答案

请看我的codepen：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到您的代码库。这是你要找的东西吗？

另一答案

您可以使用绝对定位/底部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