Question

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

我添加了一个包含div＆＃39; .messageBlock＆＃39;并编写了一个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;}

除了Opera（它在页面折叠处消失）之外，似乎在mac（Safari，FF，Chrome）上的大多数桌面网站上显示为希望，但在PC上的IE9中，页面折叠也消失了。它可以在iPad / iPhone上以纵向模式工作，但不能在横向折叠处再次消失。

任何人都可以推荐替代方法吗？

Answer 1

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

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

1 个答案: