Question

我有这个CSS和HTML结构：

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

不幸的是，我需要浮动.sidebar_container，但是使用浮点数，这个div不会占据.body_wrapper高度的100％而我出于某些原因无法使用绝对定位。< / p>

我尝试使用display：table-cell to .sidebar_container但不起作用，所以我认为唯一的解决方案是在页面加载广告后将.body_wrapper高度分配给.sidebar_container。

我如何用jQuery做到这一点？

Answer 1

这是jquery

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

这是一个小提示，显示它在行动（我添加边框以显示边界）：http://jsfiddle.net/48uxr49p/

然而，在jsfiddle中，在侧边栏上使用高度：100％工作正常（我评论它表明jquery工作）。您可能想要四处寻找是否有另一个元素/ CSS阻止高度：100％工作。

这是jsfiddle演示高度：100％有效：http://jsfiddle.net/w3dmx7qm/

Answer 2

您可以使用flexbox。

执行此操作

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.body_wrapper {
  height: 100%;
  background: #f00;
  display: flex;
}
.forumcontents {
  flex: 1;
  background: lightgreen;
}
.sidebar_container {
  flex: 0 0 270px;
  background: lightblue;
}

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

获取父级的高度并使用jQuery

2 个答案: