在 Wordpress 中使用视口高度 (vh) 显示 div 标记窗口的百分比高度答案

【问题标题】：displaying div tag a percentage height of the window using viewport height (vh) in Wordpress在 Wordpress 中使用视口高度 (vh) 显示 div 标记窗口的百分比高度
【发布时间】：2015-09-15 20:01:22
【问题描述】：

this is how it should look 但是当我粘贴相同的代码时：

    <!-- 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 代码编辑器并发布，this is what I get。我希望 div 标签及其内容占据视口垂直高度的 80%。如果这种方法在 wordpress 上不可行并且它们是替代方法，请告诉我？非常感谢

【问题讨论】：

在另一个 80vh div 中添加 80vh div 和 padding 不是一个好主意。将内部 div 的高度更改为 100% 并添加 box-sizing: border-box; 或从父 div 中删除高度。
感谢内部 div 现在是：<div style="height:100%; box-sizing: border-box; padding: 20px;"> 如果不行请告诉我

标签： html css wordpress responsive-design

【解决方案1】：

检查内容编辑器TEXT VIEW中的代码。当您在其中粘贴内容时，Wordpress 内容编辑器会生成一些标签。使用TEXT VIEW 粘贴相同的内容，并确保没有其他文本。它会正常工作的。

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

【讨论】：

嗨，很抱歉，但it is in the TEXT VIEW。我也删除了 .. 标签，但仍然没有变化
检查页面上的输出标记。它仍在围绕内容生成<p>..</p> 标签。在您粘贴的每条评论周围以及在限制其高度的 <iframe>...</iframe> 标签周围。
请从外部 div 中删除 height: 80vh;
Akash K.，在内部 div 中，我已将 height: 80vh; 替换为 height: 100%;，但我将外部 div 保留为 height: 80vh;，因为我需要它是屏幕高度的 80%。可以吗，推荐一下？
是的。很好。所有浏览器仍然不支持另一件事高度单位vh。如果您希望您的网站在所有浏览器上运行，您应该对此进行研究。 :)