2

プロジェクト全体で同じ高さを受け取るクラスがあります。クラスのメンバーである 1 つの div を動的に拡張したい。だから私は div に ID を与えます (より具体的に)。また、min-height が height よりも優先されるという印象も受けました (これにより、div の拡張が可能になるはずです)。ただし、クラスに高さが設定されている場合、div は展開されません。高さを削除すれば機能しますが、この場合、2 段階の特異性があるべきではありませんか? フィドルは次のとおりです。

作業: 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();
4

1 に答える 1

4

最小高は高さよりも優先されません。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;
}
于 2013-07-09T20:37:48.253 に答える