在WordPress中使用视口高度（vh）显示div标签以显示窗口的百分比高度

Question

这是它的外观，但是当我粘贴相同的代码时：

    <!-- dummy div -->
    <div style="height:100px;">
    </div>

    <!-- outer div to contain inner div (that has a margin) -->
    <div style="height:80vh;">

   <!-- inner most div now has its boundary defined by the outer div, so adding a border wont extend its width beyond the width of the browser window -->
   <div style="height:80vh; padding: 20px;">

   <!-- iframe set to fill 100% of its containing div -->
   <iframe src="http://insitu-app.com/insitu-tgrg-simplified.html" style="top:0; left:0; height: 100%; width: 100%; margin-left: auto; margin-right: auto; border: none" frameborder="0" allowfullscreen></iframe>

  </div>

  </div>

进入wordpress代码编辑器并发布， 这就是我得到的 。 我希望div标签及其内容占据视口垂直高度的80％。 如果无法在wordpress上使用此方法，但可以选择另一种方法，请告诉我？ 非常感谢

Answer 1

检查内容编辑器的TEXT VIEW中的代码。 将内容粘贴到其中时，Wordpress内容编辑器会生成一些标签。 使用“ TEXT VIEW粘贴相同的内容，并确保其中没有其他文本。 会很好的。

在当前情况下，正在生成额外的<code>..</code>和<p>...</p>标签。