Question

我有一些类似下面的HTML ..

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

如果你看到html“dynamicheight”div将在pageload上动态获取高度并且我希望“目标”div始终位于“dynamicheight”div的底部（根据其高度）

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

所示

我正在尝试在css下面做

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

但它没有在plz ...........

的任何工作

Answer 1

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

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

Answer 2

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

Answer 3

喜欢这个

您已在html id或css中使用了class

所以请在css remove class中更改并写id

<强> DEMO

<强> 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 4

您可以将标记更改为

<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 5

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

它们将在文档正常流程中一个接一个地呈现。

你可能需要操纵DOM，通过使用#target定位来实现（不带从文档流中移除absolute元素）：< / p>

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

<强> JSFiddle Demo #1

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

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

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

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

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

<强> JSFiddle Demo #2

Css让div停留在div的底部

5 个答案: