html - 如何将 CSS 高度设置应用于所有子元素？

Question

我试图在 Wordpress 中放置一个 iframe，但我无法为其提供与其父元素相同的高度。我已经发现，如果我将中间每个元素的大小更改为 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%;
}