高さ：自動ですべての高さスタイルをオーバーライドします

Question

私は2つのセクションを持つ反応性の高いページを持っています。右のセクション内のすべての要素が応答する必要がありますので、私が使用：コードスニペットに見るように

#rightSection * {max-width:100%;height:auto} 

をしかし、それ以上の高さのスタイルが無視されています。

!importantを使用したくない理由は、HTMLコードが多くのインラインスタイルを使用しているためです。そのため、CSSを使用してスタイルを強制したくないためです。 height:autoの後に高さを設定する方法はありますか？

#rightSection * {max-width:100%;height:auto} 
 

 

 
    .mydiv { 
 
    \t width:534px; 
 
    \t height:37px; 
 
    \t box-sizing:border-box; 
 
    }

<div id="rightSection"> 
 
    <div class="mydiv" style="background:#ff0000"></div> 
 
</div> 
 

 
That Red div is invisible because the height is igonred!

Answer 1

起こっているものは何でもあなたのコードによると罰金ですCSSは、最後のルールが適用され、それがどちらに、より具体的であることを意味しCascading Style sheetを意味します。したがって、あなたの場合、最初のルールは2番目のルールよりも高い特定性を持ちますので、height:autoが適用されています。

Specificityの詳細については、リンクを参照してください。

あなたのコードでは、上記のリンクから知る別の方法で、第2の役割を特定することができます。以下はこのような例の1つです。

#rightSection * {max-width:100%;height:auto} 
 

 

 
    #rightSection div { 
 
    \t width:534px; 
 
    \t height:37px; 
 
    \t box-sizing:border-box; 
 
    }

<div id="rightSection"> 
 
    <div class="mydiv" style="background:#ff0000"></div> 
 
</div> 
 

 
That Red div is invisible because the height is igonred!

編集： ように私は、理由の詳細についてはIdセレクタrefer thisを使用しないことをお勧め@connexoによって指摘。

クラスは

.outerDiv * {max-width:100%;height:auto} 
 

 

 
    .outerDiv .mydiv{ 
 
    \t width:534px; 
 
    \t height:37px; 
 
    \t box-sizing:border-box; 
 
    }

<div class="outerDiv"> 
 
    <div class="mydiv" style="background:#ff0000"></div> 
 
</div> 
 

 
That Red div is visible now as the rule is more specific.

はそれが役立ちます:)

Answer 2

#rightSection * {max-width:100%;height:auto} 
 

 

 
    #rightSection .mydiv { 
 
    \t width:534px; 
 
    \t height:37px; 
 
    \t box-sizing:border-box; 
 
    }

<div id="rightSection"> 
 
    <div class="mydiv" style="background:#ff0000"></div> 
 
</div> 
 

 
That Red div is invisible because the height is igonred!