javascript - 获取父项的高度并使用 jQuery 分配给子项

Question

我有这个 CSS 和 HTML 结构:

.body_wrapper {
  height: 100%;
  }

.forumcontents {
  width: calc(100% - 290px) !important;
  float: left;
  }

.sidebar_container {
  width: 270px;
  float: right;
  height: 100%;
  }

.clearfix {
   zoom: 1;
   clear: both;
  }

<div class="body_wrapper clearfix">
    <div class="forumcontents"></div>
    <div class="sidebar_container"></div>
</div>

不幸的是，我需要 float .sidebar_container，但是有了 float ，这个 div 不会占用 .body_wrapper 的 100% 高度，而且由于某些原因我不能使用绝对定位。

我如何使用 jQuery 做到这一点？

Answer 1

这是jquery

$(function () {
    $(".sidebar_container").height($(".body_wrapper").height());
});

这是一个 fiddle ，展示了它的实际效果(我添加了边框以显示边界):http://jsfiddle.net/48uxr49p/

但是，在 jsfiddle 中，在侧边栏上使用 height:100% 效果很好(我将其注释掉以表明 jquery 有效)。您可能想四处看看是否有另一个元素/CSS 阻止 height:100% 工作。

这是演示 height:100% 有效的 jsfiddle:http://jsfiddle.net/w3dmx7qm/