我有一个字段集，里面有几个 div，一次只显示一个。我希望字段集始终保持其高度，即使其内容的可见性发生变化。所以我将 fieldset.style.minHeight 设置为所有可能内容部分的 offsetHeight 的最大值。但这并没有考虑到 minHeight 是外部的高度，而不是字段集的客户端部分。所以我尝试添加字段集的 offsetHeight 和 clientHeight 之间的差异。但这不是正确的值(在我的例子中它只有 2 px)。
所以问题是:如何设置字段集的 minHeight 以便为具有给定高度的 child 提供足够的空间。 (我没有使用边框、边距或填充，我正在寻找纯 JavaScript 解决方案)
<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";
}
}
最佳答案
尝试使用此解决方案:http://jsfiddle.net/ps92wynp/
#fs {
min-height:70px !important;
}
关于javascript - html 字段集内部高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28851909/