CSS - 動態90％視口高度 - 跨設備/瀏覽器

我正在用Bootstrap建立一個動態站點3 - 簡短的一部分是從左側滑動消息框覆蓋 - 理想情況下需要填充90屏幕高度的百分比。CSS - 動態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，鉻）大多數桌面網站（它消失在頁面倍）希望，而且在PC上的IE9中也會消失。它可以在iPad/iPhone上以縱向模式工作，但不會在橫向上再次在頁面摺疊中消失。

任何人都可以推薦一種替代方法嗎？

來源

2014-02-11 Dancer

儘量不要將height設置爲auto以及應用bottom: 10%;。這裏是一個小提琴，與改變CSS http://fiddle.jshell.net/T3LmX/2/

來源

2014-02-11 12:02:05

多數民衆贊成 - 歡呼你的幫助@尼科Ø – Dancer

你的歡迎和祝你好運的項目。我仍然在思考爲什麼身高：90％;的固定項目沒有馬上工作......我想你必須設置三個來使它工作...無論哪種方式，這應該做的伎倆。 –

CSS - 動態90％視口高度 - 跨設備/瀏覽器

回答

相關問題