javascript - 如何使 dt 和 dd 标签的背景高度相同？

Question

根据这个question没有简单的方法可以解决这个问题，只需使用表格即可。但即便如此，有什么办法让它发挥作用吗？我的问题是我有 dt 的背景，但是当 dd 的内容比 dt 多时，它的高度保持不变。我如何使它们具有相同的高度？我正在考虑在 jquery 中获得他们的高度，但这样做似乎有点复杂。我是 jquery 的初学者，所以我不确定它是否会成功。无论如何，我不想要 negative margin和 padding因为我需要 dl 为 overflow: visible因为下拉菜单。

原创

JSFIDDLE

与 negative margin和 padding

JSFIDDLE

无论如何，我不希望它是不惜一切代价的边距填充组合。但至于将其转换为表格，如果这是解决此问题的唯一方法，我愿意接受。请告诉我应该如何解决这个问题。非常感谢!

Answer 1

可能会有帮助:

检查这里: https://jsfiddle.net/buzjby59/2/

<dl>
  <dt>Term A</dt>
  <dd>Definition A1</dd>
  <dd>Definition A2</dd>
  <dd>Definition A3</dd>
  <dd>Definition A4</dd>
</dl>
<dl>
  <dt>Term B</dt>
  <dd>Definition B1</dd>
  <dd>Definition B2</dd>
  <dd>Definition B3</dd>
</dl>

body {
    margin: 0;
}
dl {
    width: 100%;
    display: table;
    margin:0 0 15px;
}
dt {
    background: #999999;
    display: table-cell;
    text-align: left;
    vertical-align: top;
    width: 80px;
}
dd {
    background: #3399ff;
    margin-left: 0;
    display:block;
}
dt:after, dd:after {
    clear: both;
}