CSS - 动态 90% 视口(viewport)高度 - 跨设备/浏览器

Question

我正在使用 Bootstrap 3 构建动态网站 - 部分内容是从左侧滑入消息框覆盖层 - 理想情况下需要填充屏幕高度的 90%。

我已经添加了一个包含 div '.messageBlock' 并编写了一个 JS 脚本来切换幻灯片并处理消息传递 - 我遇到的问题是找出一种将 90% 高度应用于消息 block 的好方法台式机/平板电脑/手机。

到目前为止我有 -

.messageBlock{height:90%; position:fixed; left:200px; width:290px; background:rgba(255,255,255,0.5);left:-300px; padding:15px; font-size:1.2em;  z-index:255;}

这似乎在 Mac 上的大多数桌面网站(Safari、FF、Chrome)上都如预期显示，但 Opera 除外(它在页面折叠后消失)，但在 PC 上的 IE9 中也会在页面折叠后消失。它在 iPad/iPhone 上以纵向模式工作，但不能在横向模式下再次消失在页面折叠处。

谁能推荐一种替代方法？

Answer 1

尽量不要将 height 设置为 auto 以外的任何值，并应用 bottom: 10%;。这是一个 fiddle ，修改了 CSS http://fiddle.jshell.net/T3LmX/2/