height: auto отменяет все стили высоты

Question

У меня есть отзывчивая страница с двумя разделами. Все элементы в правой части должны реагировать так что я использовал:

#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, что означает, что последнее правило применяется и в зависимости от того, является более специфичным. Поэтому в вашем случае первое правило имеет более высокую спецификацию, чем второе правило, поэтому применяется height:auto.

См. Ссылку для получения более подробной информации о Specificity.

Итак, в коде вы можете сделать вторую роль morre specific различными способами, о которых вы узнаете из приведенной выше ссылки. Ниже приведен один такой пример.

#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!

Edit: Как отметил @connexo я хотел бы предложить не использовать Id селекторы refer this для получения более подробной информации о том, почему.

Вы можете использовать классы CSS вместо этого как классы помогают сделать ваш код более общим, например

.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!