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

标签 css google-chrome google-apps-script iframe

我有this Google Apps 脚本网络应用程序。它应该只显示一个蓝色背景,该背景的高度为屏幕的 View 高度。

这是代码

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

问题是主体没有显示为可用 View 高度的 100%。这是因为部分 View 高度被“此应用由另一用户创建”横幅占据。

相反,右侧会出现一个滚动条(附截图)。应用 iframe 高度设置为 100vh + 横幅高度的滚动条。

因此,当我向正文添加内容时,如果内容大于 View 高度上的高度,我会得到 2 个滚动条,一个用于正文(应该如此),一个用于 iframe。让用户感到困惑。

有什么方法可以使 iframe 的高度摆脱滚动条吗?

将 body height 更改为小于 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:我现在提出了一个问题跟踪器 here

enter image description here

enter image description here

最佳答案

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

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

关于css - 如何使应用程序脚本 Web 应用程序显示为实际可用高度的 100%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58174612/

相关文章:

javascript - Google Apps 脚本通过电子表格发送电子邮件不起作用

google-apps-script - 使用 Google Apps 脚本将图像作为 BlobSource 插入工作表

validation - 为 google doc 中的列设置数据验证,包括新行

css - 我如何将 Angular material 2 下拉菜单与 CSS flexbox 一起使用?

CSS :focus not working

javascript - 在div的左侧添加宽度?

apache - 如何确保 AuthName 在所有浏览器中都有效?

jquery - jScrollpane Chrome 问题

css - HTML 元素上的 rem 单位有意义吗?

javascript - 在同一容器内的新窗口中打开图像