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>

Section 6.3.4 of the thesis

Answer 1

请设置我的密码笔：https://codepen.io/anon/pen/gZvweb

target_link_libraries(Project PRIVATE library1 library2)
get_target_property(TARGET_LIBRARIES Project LINK_LIBRARIES)
message("Libraries at start")
message(${TARGET_LIBRARIES})
LIST(REMOVE_ITEM TARGET_LIBRARIES library1 )
message("Modified libraries list")
message(${TARGET_LIBRARIES})
set_property(TARGET Project PROPERTY LINK_LIBRARIES  ${TARGET_LIBRARIES} )
get_target_property(TARGET_LIBRARIES2 Project LINK_LIBRARIES)
message("Libraries after change")
message(${TARGET_LIBRARIES2})

我在代码库中添加了相对位置和底部位置：0。是您要找的东西吗？

Answer 2

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

2 个答案: