检票口：如何使div高度依赖于另一个div

Question

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

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

示例：

两个div的内容都是可变的，因为div2用比例字体包装文本，所以在浏览器中呈现之前我无法真正预测它的高度。

在GWT中，我通过一次向div1添加内容来完成此操作，如果它超过了div2的高度（已经有内容呈现），我只需删除该行。由于GWT在客户端上运行，因此这非常简单。

在Wicket中做到这一点的最佳方法是什么？我希望需要一些Javascript，但如果有一个组件已经做到这一点（或者更容易），我会非常乐意使用它。

Answer 1

在纯粹的Wicket的帮助下，我不认为，有办法做到这一点。但也许Wicket + JQuery方法可以帮助您实现自己的想法......

Answer 2

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

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

Answer 3

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

希望这有点帮助。

Answer 4

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

所以（使用jQuery）......

<强> CSS

#div1 { overflow: hidden; }

<强>的Javascript

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

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

要考虑在线上砍伐，请测试线高并将高度设置为倍数。