Question

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

所以问题是：如何设置字段集的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";
    }
}

Answer 1

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

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

Answer 2

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

我看到你在哪里得到2px差异 - 检查字段集。如果min-height设置为54px，则字段集的实际高度为90px。将min-height更改为下面的答案 - 当92px设置为min-height时，身高为72px。

小提琴：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";
}

html fieldset内部高度

2 个答案: