Question

我使用标题div作为固定标题，但该div的高度会定期更改，因为事情是动态的。现在，当填充顶部给予该div时，显示下面的下一个div。

这样，当标题div的高度发生变化时，内容DIV也会改变它的位置。

如果有人可以提供代码，我会很高兴。

Answer 1

这是我认为的jQuery答案。更多细节会有所帮助。

$("#header").resize(function() {
  $("#otherdiv").css("padding", somevalue);
});

Answer 2

我会建议（如果可能的话）创建一个包含标题div和内容div的父div。（可选）在div设置为css样式clear: both;。这样，内容div的垂直位置将相对于标题div。

<div id="parent">
    <div id="header" style="clear: both"></div>
    <div id="content"></div>
</div>

Answer 3

我能想到的两件事，因为我最近正在考虑同样的问题：

我认为你正在寻找的最直接的答案是{element} .offsetHeight。根据我在FireFox中使用的内容（不确定其他浏览器），这似乎是元素的高度。放置另一个div以允许所需的间距时，可能会包含几个像素。

但是，如果你将div一个接一个地放置（兄弟姐妹）并且它们没有被设置为浮动，则更改上部div应该在其内容发生变化时移动下部div。

Answer 4

对于TheStijns答案的html（标题css设置为position：absolute），您可以使用以下代码：

window.setInterval(function(){
  var header = document.getElementById('header');
  var content = document.getElementById('content');
  content.style.paddingTop = header.offsetHeight + 'px';
}, 100);

事件驱动的jquery解决方案虽然更有意义。

对于您所描述的简单情况，尽管使用javascript，但不一定非必要。带有一点css的html应该可以工作。

获取顶部div的高度并将该值作为另一个DIV的顶部填充

4 个答案: