javascript - 匹配元素高度

Question

我在 slider 的左侧有一个菜单。 slider 的高度与其加载的图像文件的大小直接相关。我希望菜单的父元素始终与 slider 高度相同。

我尝试用 CSS 对此进行编码，然后环顾四周，意识到用 CSS 是不可能的。因此，我尝试用 Java 对其进行编码，但这是不对的。

任何对此的帮助都会很棒!

--更新--

这部分是编辑。我尝试了一些建议，但它们不起作用。 slider 根据屏幕宽度改变高度。因此，当我将其拖出时，它会发生变化并且菜单比 slider 短。如果我将 slider 设置为最大高度，宽度将不会显示为 60% 余量的 100%。

我相信我需要的是一段 jquery: - 捕获导航元素 - 检测 .Slider 的高度 - 使导航元素与 .Slider 元素的高度相同。

我已经尝试了下面的js代码，但是没有用。

有人知道怎么做吗？

代码如下:

  window.jQuery( function() {
    window.jQuery('nav').height(window.jQuery('.Slider').height ())
  });

nav {
  display: block;
  float: left;
  width: 40%;
  height: 100%;
}
nav ul {
  background: lightgreen;
}
nav ul li {
  display: inline;
  width: 100%;
  height: 33.3333%;
  margin-left: 0;
}
.Slider {
  display: block;
  float: right;
  width: 60%;
}

<div id="wrapper">
  <nav>
    <ul>
      <li>
        Item 1
      </li>
      <li>
        Item 2
      </li>
      <li>
        Item 3
      </li>
    </ul>
  </nav>
  <div class="Slider">
    Pics are here.
  </div>
</div>

Answer 1

我认为你只需要一个 clearfix，否则我不明白这个问题。试试这个:

.theParent:after {
    display: block;
    clear: both;
    content: "";
}