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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将DIV对准其容器的底部?相关的知识,希望对你有一定的参考价值。

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

以上是关于如何将DIV对准其容器的底部?的主要内容,如果未能解决你的问题,请参考以下文章

将React Components对准容器底部

如何防止 div 文本掉到容器底部?

如何让 div 在容器 div 的底部对齐 [重复]

当宽度未知时,将图像水平居中并将其垂直放置在 div 内的底部

浮动底部 - 彼此顶部

在 div 容器底部对齐 div [重复]