Как переопределить css Highchart

Question

Я немного рассылаю вопросы о Highchart, но, похоже, моя проблема - это голова.

У меня есть эта структура в навигаторе:

Мы можем видеть, что высота highcharts-container является 400px и шириной 268px, то же самое для highcharts-root, но в моем CSS я изменить эти значения, чтобы уменьшить общий размер моей диаграммы и отображать их, как я хочу:

.highcharts-container { 
    width: 100%; 
    height: 20% !important; 
} 
.highcharts-root { 
    width: 100%; 
    height: 20% !important; 
} 
.highcharts-background { 
    width: 100%; 
    height: 20% !important; 
} 
.divChart { 
    width: 100%; 
    height: 20% !important; 
} 

Но почему это не влияет на график?!?!

[EDIT] Я не понимаю, почему высота до сих пор 400px взгляд:

Answer 1

мне нужно, чтобы определить ширину + высоту при создании диаграммы, как это:

nameChart = Highcharts.chart(currentContainer.idChartMem, { 
      chart: { 
      width: '100%', 
      height: '7%' 
      }, 

Answer 2

Вы должны сделать больше "четкое" селектор. В принципе правило используется, ведьма имеет самый точный селектор. Поэтому попробуйте это для:

.x_panel .x_content .row .highcharts-container { 
    width: 100%; 
    height: 20% !important; 
} 

Это должно сделать трюк. Если нет, попробуйте сделать его более конкретным.

EDIT: Пример.

Структура

<div id="mainCont"> 
    <div class="subCont"> 
    <div class="content"> COLOR ME </div> 
    </div> 
</div> 

С помощью CSS:

.content{ 
color: red; 
} 

окрасит .content красный, но когда мы добавим это в CSS:

#mainCont .content{ 
color:blue; 
} 

переназначающее первым один, поскольку он имеет более специфический селектор.

EDIT2: Вот кое-что для вас, чтобы прочитать как хорошо: https://developer.mozilla.org/en/docs/Web/CSS/Specificity