我有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
最佳答案
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/