html fieldset внутренняя высота

У меня есть набор полей с несколькими div внутри, из которых только один отображается одновременно. Я хочу, чтобы fieldset всегда сохранял свою высоту, даже когда меняется видимость его содержимого. Поэтому я установил для параметра fieldset.style.minHeight максимальное значение offsetHeight всех возможных частей контента. Но это не учитывает, что minHeight - это высота внешней, а не клиентской части набора полей. Поэтому я попытался добавить разницу между offsetHeight и clientHeight из набора полей. Но это не правильное значение (в моем случае это всего 2 пикселя).html 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"; 
    } 
}

источник

2015-03-04 Gerhard

Может у нас есть jsfiddle пожалуйста? – Kursion

Я работаю над этим, я никогда не делал этого, поэтому требуется некоторое время ... – Gerhard

Наконец-то получил jsfiddle done: http://jsfiddle.net/zhmhm71L/5/ – Gerhard

Попробуйте использовать это решение: http://jsfiddle.net/ps92wynp/

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

источник

2015-03-04 11:59:19 Pavel

Это не имеет значения. Какова идея? – Gerhard

В Fieldset clientHeight будет никогда не будет размером с наибольшего ребенка offsetHeight. Вы упомянули разницу в 2px, и имеет смысл добавить минимальную высоту к максимальной высоте - гарантируя достаточное пространство для всех дочерних элементов.

Я вижу, где у вас разница 2px - Проверка набора полей. с min-height установлен на 54px - фактическая высота поля была 90px. Изменение min-height на приведенные ниже формулы. Высота была 92px, когда min-height было установлено на 72px.

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

источник

2015-03-04 13:17:03 Eon

Нет, оба пролета могут быть большими (на самом деле у меня их много), это отбросило бы слишком много места. – Gerhard

ответ

Смежные вопросы