当一个值为auto时，设置两个div的高度

Question

所以我有两个div：

<div id="content">
</div>

<div id="navigation">
</div>

CSS：

#content{
  width: 800px;
  height: auto;
  padding-bottom: 30px;
}
#navigation{
  width: 200px;
}

我将#content宽度设置为800px，高度设置为auto。

我想将#navigation的高度设置为#content的高度，因为#content的高度会根据我投入的内容而改变。

这是我已经拥有的jQuery，但没有运气：

<script type="text/javascript">

    var height = $("content").outerHeight;

    $("#navigaton").css("height", height+"px");

</script>

提前致谢。

Answer 1

您的语法有些问题。 我修复了 HERE

 $(function(){
   var h = $("#content").outerHeight(true);
   $("#navigation").css("height", h+"px");       
 });

由于您使用outerHeight，我也使用过它 但你也可以使用height或innerHeight。

Answer 2

将它们包装在父容器中。对于导航：

position: absolute;
top: 0px;
bottom: 0px;

不需要JS

Answer 3

你错过了一个＆＃39; onload＆＃39;事件

您应该使用＆＃39; .height（）＆＃39;

OuterHeight：内容高度+填充+边框

InnerHeight：内容高度+填充

高度：内容高度

Answer 4

查看您的脚本，您错过了“内容”前面的“＃”。尝试将其更改为$（“＃content”）。