wicket：如何使 div 高度依赖于另一个 div答案

【问题标题】：wicket: how to make div height dependent on another divwicket：如何使 div 高度依赖于另一个 div
【发布时间】：2011-05-15 18:08:05
【问题描述】：

我是一名 GWT 难民，试图弄清楚如何在 Wicket 中做各种 Ajax 式的事情。

我有两个 div。我想让第一个 div 的 max-height 依赖于第二个 div 的高度，并带有“更多/更少”链接，以便用户可以展开第一个 div。

例子：

两个 div 的内容都是可变的，并且由于 div2 已将文本包装成比例字体，因此在呈现在浏览器中之前，我无法真正预测其高度。

在 GWT 中，我通过一次向 div1 添加一行内容来实现这一点，如果它超过了 div2 的高度（它已经呈现了其内容），我只需删除该行。由于 GWT 在客户端上运行，这相当简单。

在 Wicket 中执行此操作的最佳方法是什么？我预计需要一点 Javascript，但如果有一个组件已经这样做（或使它更容易），我会很乐意使用它。

【问题讨论】：

标签： javascript css ajax wicket

【解决方案1】：

在纯 Wicket 的帮助下，我认为没有办法做到这一点。但也许Wicket + JQuery 方法会帮助您实现您的想法...

【讨论】：

【解决方案2】：

似乎有一个相当简单的 JavaScript 解决方案（除了它不能解决显示半行问题，但我认为可以通过玩弄这个来解决：

document.getElementById("div1").style.height = document.getElementById("div2").offsetHeight;

【讨论】：

【解决方案3】：

这不能通过 CSS 几乎完全解决吗？就像将两个 DIV 添加到具有溢出：隐藏属性的第三个 DIV、剪切第二个 DIV 内容并通过 JavaScript 扩展包装 DIV 的高度一样？也许您必须将 DIV1 更改为内联处理，这样它就不会“推动”容器的下边框或类似的东西...... 就像一个指针，没有尝试过，现在不能尝试，不确定它是否有效，但我认为，它应该。无论如何，你或我，必须有人玩弄这个才能找出答案......

希望这会有所帮助。

【讨论】：

我喜欢纯 CSS 解决方案，但我认为不存在。 overflow:hidden 的问题在于它很可能会切断一行中间的第一个 div。另外，我认为您需要在包含的 div 上设置一个明确的高度，这实际上会切断两个子 div。至于添加JS来扩大包装div的高度，那我觉得还不如直接扩大第一个div的高度。
你说得对，至少我没有在晚餐前想出一个；）但我想，我发现了更好的东西......（与 firefox 一起使用）......看我的下一个答案...

【解决方案4】：

您可以将两者完全打开（以提高非 js 用户的可访问性），然后将 Div 1 的高度限制为 Div 2 的高度。

所以（使用 jQuery）...

CSS

#div1 { overflow: hidden; }

Javascript

$(document).ready(function() {
  var div2_height = $('#div2').height();

  $('#div1').height(div2_height);
});

要考虑在一条线上切割，请测试 line-height 并将高度设置为倍数。

【讨论】：