html 字段集内部高度答案

【问题标题】：html fieldset inner heighthtml 字段集内部高度
【发布时间】：2015-03-04 21:27:39
【问题描述】：

我有一个字段集，里面有几个 div，一次只显示一个。我希望字段集始终保持其高度，即使其内容的可见性发生变化。所以我将 fieldset.style.minHeight 设置为所有可能的内容部分的 offsetHeight 的最大值。但这并没有考虑到 minHeight 是外部的高度，而不是字段集的客户端部分。所以我尝试添加字段集的offsetHeight和clientHeight之间的差异。但这不是正确的值（在我的情况下它只有 2 px）。

所以问题是：如何设置字段集的 minHeight 以便为具有给定高度的孩子提供足够的空间。（我没有使用边框、边距或填充，我正在寻找纯 JavaScript 解决方案）

jsfiddle

<body onload="onLoad()">
    <fieldset id="fs">
        <legend>Status</legend> 
        <span id="id1" style="display: block;">Short text.</span>
        <span id="id2" style="display: block;">Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. Some longer text. </span>
    </fieldset>
    <input type=submit value="toggle" onclick="toggle()" />
</body>

function onLoad() {
    var fs = document.getElementById("fs");
    var span1 = document.getElementById("id1");
    var span2 = document.getElementById("id2");
    fs.style.minHeight = Math.max(span1.offsetHeight, span2.offsetHeight).toString() + "px";
    span1.style.display = "block";
    span2.style.display = "none";
}

function toggle() {
    var span1 = document.getElementById("id1");
    var span2 = document.getElementById("id2");
    if (span1.style.display == "block") {
        span1.style.display = "none";
        span2.style.display = "block";
    } else {
        span1.style.display = "block";
        span2.style.display = "none";
    }
}

【问题讨论】：

可以给我们一个jsfiddle吗？
我正在努力，我从来没有做过，所以需要一些时间......
终于把jsfiddle搞定了：jsfiddle.net/zhmhm71L/5
这个问题仍然有点令人困惑 - 看看你的 JSFiddle - 你已经实现了所要求的 - 将 Fieldset 的 minHeight 样式属性设置为等于其中最高子元素的高度。我错过了什么吗？ - 值应该是 54px 吗？（即当前最大子元素高度的高度）
它不是静态的，我事先不知道跨度，所以我必须以某种方式从最高跨度得出字段集的高度，但当然不会通过选择一些任意的额外偏移量来浪费空间.在我的浏览器中，当我点击“切换”时，字段集大小会发生变化，这是我不想要的。将字段集的字体大小添加两倍似乎就足够了，但这不合逻辑。

标签： javascript css fieldset

【解决方案1】：

尝试使用此解决方案：http://jsfiddle.net/ps92wynp/

#fs {
    min-height:70px !important;
}

【讨论】：

这没有什么区别。想法是什么？

【解决方案2】：

字段集clientHeight 永远不会是最大子offsetHeight 的大小。您提到了 2px 的差异，将最小高度添加到最大高度是有意义的 - 保证所有子元素都有足够的空间。

我知道你在哪里得到了 2px 的差异 - 检查字段集。将min-height 设置为54px - 字段集的实际高度为90px。将min-height 更改为下面回答的公式 - 当min-height 设置为72px 时，高度为92px。

小提琴：http://jsfiddle.net/ps92wynp/7/

function onLoad() {
    var fs = document.getElementById("fs");
    var span1 = document.getElementById("id1");
    var span2 = document.getElementById("id2");
    fs.style.minHeight = (Math.max(span1.offsetHeight, span2.offsetHeight) + Math.min(span1.offsetHeight, span2.offsetHeight)) .toString() + "px"; //72px in your example.
    span1.style.display = "block";
    span2.style.display = "none";
}

【讨论】：

不，两个span都可能很大（其实我有很多），这样会浪费太多空间。