Javascript html字段集内部高度_Javascript_Css_Fieldset

Javascript html字段集内部高度

javascript css

Javascript html字段集内部高度,javascript,css,fieldset,Javascript,Css,Fieldset,我有一个字段集，里面有几个div，一次只显示一个div。我希望字段集始终保持其高度，即使其内容的可见性发生变化。因此，我将fieldset.style.minHeight设置为所有可能内容部分的最大离地高度。但这并没有考虑到minHeight是外部的高度，而不是字段集的客户端部分。所以我试着增加外野组的离地高度和离地高度之间的差异。但这不是正确的值，在我的例子中只有2px 所以问题是：如何设置一个字段集的最小高度，使给定高度的孩子有足够的空间。我没有使用边框、边距或填充，我正在寻找一个纯Java

我有一个字段集，里面有几个div，一次只显示一个div。我希望字段集始终保持其高度，即使其内容的可见性发生变化。因此，我将fieldset.style.minHeight设置为所有可能内容部分的最大离地高度。但这并没有考虑到minHeight是外部的高度，而不是字段集的客户端部分。所以我试着增加外野组的离地高度和离地高度之间的差异。但这不是正确的值，在我的例子中只有2px

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

尝试使用此解决方案：

fieldset clientHeight的大小永远不会是最大的孩子的远视时的大小。您提到了一个2px的差异，将最小高度添加到最大高度是有意义的，这保证了所有子元素都有足够的空间

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

小提琴：

请给我们一个JSFIDLE好吗？我正在做，我从来没有做过一个，所以需要一些时间……最终完成了JSFIDLE：问题仍然有点困惑——看看您的JSFIDLE——您已经实现了所要求的——将字段集的minHeight样式属性设置为其中最高子元素的高度。我错过什么了吗这个值应该是54px吗？它是当前最大子元素高度的高度它不是静态的，我事先不知道跨距，所以我必须从最高跨距导出字段集的高度，但当然不能通过选择一些任意的额外偏移来浪费空间。在我的浏览器中，当我单击切换时，字段集大小会发生更改，这是我不想要的。似乎是将字段集的fontsize增加两倍，但这不符合逻辑。这没有什么区别。想法是什么？不，两个跨度都可能很大事实上我有很多，这会浪费太多空间。

<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";
    }
}

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

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";
}