将父级div的高度（动态）传递给子级div，并将子级div设置为相同的高度

Question

如果我有两个div，其中父元素（我们称之为#parent）的高度是动态的，那么是否有办法使用jQuery使子元素div（我们称之为#child）保持相同的高度，并且随着父元素div响应式地改变高度而增加和减少？

- Ferdia O'Brien

---

为什么不直接将子元素的高度设置为100%？ - Mike Manfrin

Firefox和IE似乎无法处理当父级div没有严格设置高度时的情况。 - Ferdia O'Brien

Answer 1

Try...

var h = $("#parent").height();
$("#child").height(h);

或者

$("#child").height($("#parent").height()); //to save a line of code

在更改

高度的代码之后添加此代码。无论是在 $(document).ready() 中还是在自定义函数中。

- Kierchon

---

为什么不省略临时变量并进一步进行优化呢？$("#child").height($("#parent").height()));。哦，还有这个方法不能响应调整大小。 - j08691

@j08691 已经为你更新了。我认为将 height() 的不同用法分开展示对于 jQuery 初学者来说更易理解。 - Kierchon

$(document).ready()并不是你想要的，因为父div可能包含图片和其他动态内容。你应该使用$(window).load(function(){ // 在这里编写你的代码 });代替它。（对我有用） - Malachi

Answer 2

你也可以通过CSS来实现，只需将子div的高度设置为100％即可

#parent
{
//css of parent div
}
#child{
height:100%;
}

- Sid M

---

IE和Firefox似乎无法处理父div的高度没有严格设置的情况，在这种情况下我无法这样做。 - Ferdia O'Brien

它在IE中运行良好，我尝试了没有父级div高度的情况。 - Sid M

这是我试图解决的问题。http://stackoverflow.com/questions/19863286/positioning-and-height-not-working-correctly-in-firefox-ie/19863570 你有任何想法为什么这个div在IE或Firefox中无法正常工作吗？ - Ferdia O'Brien

Answer 3

display: inline-block 对我很有用。我在另一个 ng-repeat 中嵌套了一个 ng-repeat，而父元素始终为 0 高度。

- Paul Pacurar