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

你可以分组元素或者你可以使用＆gt; *来自家长希望这个帮助:)

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

或

   .parent > * {height: 100%;}

Answer 2

这似乎是child selectors的理想情况。尽管您可能希望将<p>更改为<div>：

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

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

2 个答案: