时间戳

首页 > 解决方案 > 如何使应用程序脚本 Web 应用程序显示为实际可用高度的 100%？

css - 如何使应用程序脚本 Web 应用程序显示为实际可用高度的 100%？

问题描述

我有这个Google Apps Script 网络应用程序。它应该只显示一个蓝色背景，即屏幕视图高度的高度。

这是代码

 <html>
  <head>
   <style>
     html, body {
       margin: 0px;
       height: 100vh;
       background-color:lightblue;
      }
   </style>  
 </head> 
 <body>
 </body>  
</html>

问题是主体没有显示为可用视图高度的 100%。这是因为“这个应用程序是由另一个用户创建的”横幅占据了一些视图高度。

取而代之的是，右侧会出现一个滚动条（附上截图）。应用 iframe 高度设置为 100vh + 横幅高度的滚动条。

因此，当我向正文添加内容时，它大于视图高度上的高度，我得到 2 个滚动条，一个用于正文（应该是），一个用于 iframe。迷惑用户。

有什么办法可以使 iframe 成为摆脱滚动条的高度？

将身体高度更改为小于 100vh 没有效果，也没有使用 % 或 px 单位。

注意：我不是在问如何删除横幅。我在问如何调整容纳身体的 iframe 的大小，尽管有横幅

谢谢

编辑：在显示横幅离开屏幕的滚动屏幕截图后添加。

EDIT2: 啊...是的 IE 也不这样做，还有 FF。似乎是特定于 Chrome

编辑 3：也根据下面的评论尝试了这种风格

<style>
  html, body, iframe#sandboxFrame, .full_size {
        margin: 0  !important;
        padding: 0  !important;
        height: 100% !important;
        width: 100%  !important;
        background-color: lightblue;
}
</style>

编辑 4：我现在在这里提出了问题跟踪器

在此处输入图像描述

在此处输入图像描述

标签： cssgoogle-chromegoogle-apps-scriptiframe

解决方案

html, body, iframe#sandboxFrame, .full_size {
     margin: 0;
     padding: 0;
     height: 100%;
     width: 100%;
}

使用 google chrome 工具在网络浏览器中停用这些样式，然后将 100vh 添加到需要它的元素。你应该能够得到你想要的结果。

推荐阅读