html fieldset内部高度

Question

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

所以问题是：如何设置一个fieldset的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 - 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 个解决方案

解决方案1
0 2015-03-04 11:59:19

解决方案2
0 2015-03-04 13:17:03

html fieldset内部高度

问题描述

2 个解决方案

解决方案1 0 2015-03-04 11:59:19

解决方案2 0 2015-03-04 13:17:03

解决方案1
0 2015-03-04 11:59:19

解决方案2
0 2015-03-04 13:17:03