min-height, height, class, id priority

Question

У меня есть класс, который получает ту же высоту по всему проекту. Я хочу, чтобы один div, который является членом класса, динамически расширялся. Поэтому я даю div ID (более специфичность). У меня также создалось впечатление, что минимальная высота будет иметь приоритет над высотой (что должно позволить расширение div). Но div не будет расширяться, если его класс имеет установленную высоту. Он работает, если я удаляю высоту, но в этом случае не должно быть двух степеней большей специфичности? Вот скрипка:

Рабочие: http://jsfiddle.net/farinasa/WHn9t/

Не работает: http://jsfiddle.net/farinasa/WHn9t/2/

HTML:

<div id="specific" class="lessSpecific"> 

</div> 

CSS:

.lessSpecific 
{ 
    border: 1px solid black; 
    height: 100px; 
} 

#specific 
{ 
    min-height: 300px; 
} 

JS:

var box = document.getElementById("specific"); 
function test() { 
    for (var i = 0; i < 20; ++i) 
     box.innerHTML += "Hello<br>"; 
} 

test(); 

Answer 1

Min-height не имеет приоритета над высотой. Правила ID имеют приоритет над правилами класса. Поэтому добавьте height: auto в селектор ID, и вы аннулируете статическую высоту для этого контейнера.

http://jsfiddle.net/WHn9t/3/

я считаю полезным сослаться на W3Schools найти значения CSS по умолчанию для таких ситуаций, когда правило должно быть сброшено для конкретного элемента. http://www.w3schools.com/cssref/pr_dim_height.asp

.lessSpecific 
{ 
    border: 1px solid black; 
    height: 100px; 
} 

#specific 
{ 
    min-height: 300px; 
    height: auto; 
} 

или, если вы предпочитаете

.lessSpecific 
{ 
    border: 1px solid black; 
    height: 100px; 
} 

#specific.lessSpecific 
{ 
    min-height: 300px; 
    height: auto; 
}