CSS 或 jQuery 高度继承问题答案

【问题标题】：CSS or jQuery height inheritance problemsCSS 或 jQuery 高度继承问题
【发布时间】：2012-06-14 08:59:32
【问题描述】：

我在用作边框的框内的内容高度方面遇到问题。我基本上有一个内部内容框和一个背景框顶部的侧边栏。背景框从内部内容框继承它的高度，它从内容本身继承它的高度。问题在于，由于侧边栏与内部内容框的内容量不同，所以侧边栏的高度与内部内容框的高度不匹配。我用 jQuery 写了一个小脚本来修复它，但它不兼容跨浏览器。

jQuery(function(){
  var pageHeight = jQuery('div#internalcontent').height();
  jQuery('div#sidebar').css('height', pageHeight);
});

此代码有时在 Chrome 中有效，但在 Firefox 中通常会失败。我认为它与页面加载方式有关 - 例如，在分配页面高度时所有元素都没有加载。

有谁知道在 CSS 中执行此操作或在 javascript 中修复它的方法？谢谢。

【问题讨论】：

我通过将该代码放到一个函数中，然后使用来修复它。

标签： jquery css inheritance height

【解决方案1】：

在 $(document).ready() 之后调用该代码

$(document).ready(function(){
  var pageHeight = $('div#internalcontent').height();
  $('div#sidebar').css('height', pageHeight);
});

【讨论】：

修复了它，至少在没有其他缓存页面或任何东西的情况下。（我以为我以前修复过一次，所以这是很有可能的）我会继续接受一些答案，看看是否有人有办法在 CSS 中做到这一点。谢谢！
没问题，很高兴能帮上忙！
刚刚重新加载页面一百次，修复并不一致。我会说页面加载正确的 3/5 倍，否则高度会再次混乱。知道为什么会发生这种情况吗？
如果页面加载的 3/5 次正确，那很奇怪......你有很多其他的 js 在页面上运行吗？或者可能是与页面加载有关的 Firefox 插件/插件

【解决方案2】：

@Adam jQuery(function(){}); 据我所知，应该产生与文档就绪处理程序相同的行为。 http://api.jquery.com/ready/

【讨论】：

是的，我认为这是正确的，我对这种变化也有类似的问题。
在评论某人的答案时，请不要做出新的答案，而是下次真正发表评论。 :-)