jquery - Css 使 div 停留在 div 的底部

Question

我有一些像下面这样的html..

<div id="dynamicheight"></div>
<div id="one"></div>
<div id="two"></div>
<div id="target"></div>

如果你看到 html “dynamicheight” div 将在页面加载时动态获得高度，我希望“target” div 始终保持在“dynamicheight” div 的底部（根据其高度）

注意：中间还有其他几个 div，如 html 所示

我正在尝试在 css 下面做

#dynamicheight{
    position: relative;
}
#target{
    position: absolute;
    bottom: 0;
}

但它不能解决任何问题............

Answer 1

选择器不正确。您正在申请 dynamicheight 类。更改.为#

#dynamicheight{
    position: relative;
}
#target{
    position: absolute;
    bottom: 0;
}

Answer 2

如果您正在为具有特定 ID 的元素编写 CSS，则需要编写#target，而不是.target。

Answer 3

您可以将标记更改为

<div id="dynamicheight" class='dynamicheight'></div>
<div id="one"></div>
<div id="two"></div>
<div id="target" class='target'></div>

或将 css 更改为

#dynamicheight{
    position: relative;
}
#target{
    position: absolute;
    bottom: 0;
}

Answer 4

像这样

您在 html 中使用过id或在css您定义过class

所以请改变 if incss remove class并写id

演示

html

<div id="dynamicheight"></div>
<div id="one"></div>
<div id="two"></div>
<div id="target"></div>

css

#dynamicheight{
    position: relative;
}
#target{
    position: absolute;
    bottom: 0;
}

Answer 5

请注意#dynamicheight和#target元素是兄弟姐妹。

它们将在文档正常流程中依次呈现。

您可能需要操作 DOM，以实现此目的（无需通过使用定位从文档流中删除#target元素absolute） ：

jQuery(function($){
    $('#target').insertAfter('#dynamicheight');
});

JSFiddle 演示 #1。

但是，在某些情况下，将第二个元素移到第一个元素中可能会更好：

jQuery(function($){
    $('#target').appendTo('#dynamicheight');
});

在这种情况下，您需要使用position属性将第二个元素保持在第一个元素的底部：

#dynamicheight {
    position: relative;
    height: 400px; /* Just as demo */
}

#target {
    position: absolute;
    bottom: 0;
    width: 100%;  /* Optional */
}

JSFiddle 演示 #2。