Как применить настройку высоты CSS ко всем дочерним элементам?

Question

Я пытаюсь поставить iframe в Wordpress, но я не мог дать ему ту же высоту, что и родительский элемент. Я понял, что могу дать ему правильный размер, если бы я изменил размер каждого элемента между 100%;

.panel-first-child {height: 100%;} 
.panel-grid-cell {height: 100%;} 
.textwidget {height: 100%;} 
.embed-responsive {height: 100%;} 

<div class="panel-grid-cell" id="pgc-6-1-0" > 
<div class="so-panel widget widget_text panel-first-child panel-last-child" id="panel-6-1-0-0" data-index="3"> 
<h3 class="widget-title">Het Weer</h3>   
<div class="textwidget"> 
<p class="embed-responsive embed-responsive-16by9" style="padding-bottom: 56.25%;"> 
<iframe src="http://www.weeronline.nl/Go/ExternalWidgetsNew/ThreeDaysCity?gid=4057381&sizeType=1&temperatureScale=Celsius&defaultSettings=False" height="300px" noscroll="true"></iframe> 
</p> 
</div> 
</div> 
</div>  

Код, указанный выше, работает, но это грязно. Я хотел бы знать, есть ли способ сделать это, применяя настройку высоты только к одному элементу.

Answer 1

Это кажется идеальной ситуации для child selectors. Что-то вдоль линий этого, хотя вы, вероятно, хотите, чтобы изменить свою <p> к <div>:

.panel-grid-cell, .panel-grid-cell > div { 
    height: 100%; 
} 

Answer 2

у можете группы элементов или, если и можно использовать> * от родительской надежде, что это поможет :)

.panel-first-child, 
    .panel-grid-cell, 
    .textwidget, 
    .embed-responsive { 
    height: 100%; 
    } 

или

.parent > * {height: 100%;}