CSS - 动态 90% 视口高度 - 跨设备/浏览器答案

【问题标题】：CSS - Dynamic 90% viewport height - cross device/browserCSS - 动态 90% 视口高度 - 跨设备/浏览器
【发布时间】：2014-02-11 20:02:05
【问题描述】：

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

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

到目前为止，我有 -

.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 上以纵向模式工作，但不能在横向模式下再次消失在页面折叠处。

谁能推荐一种替代方法？

【问题讨论】：

标签： css

【解决方案1】：

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

【讨论】：

欢迎您，祝您项目顺利。我还在琢磨为什么 height:90%;固定项目没有立即工作......我想你必须设置中的任何一个才能使其工作......无论哪种方式，这应该可以解决问题。