CODEWITHSUNDEEP
css
Dancer
Dancer

Reputation: 17681

CSS - Dynamic 90% viewport height - cross device/browser

I'm building a dynamic site with Bootstrap 3 - part of the brief is to slide in a messages box overlay from the left hand side - which ideally needs to fill 90% of the screen height.

I have added a containing div '.messageBlock' and have written a JS script to toggle the slide and deal with the messaging - the issue I have is figuring out a good way to apply a 90% height to the message block across desktops/tablet/mobile.

So far I have - 

.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;}

Which seems to display as hoped across most desktop sites on the mac (Safari, FF, Chrome) with the exception of Opera (it disappears over the page fold), but also disappears over the page fold in IE9 on PC. It works in portrait mode on the iPad / iPhone but not landscape where it again disappears over the page fold.

can anyone recommend an alternative approach?

Upvotes: 0

Views: 1212

Answers (1)

Nico O
Nico O

Reputation: 14152

Try to not set height to anything than auto and apply bottom: 10%;. Here is a fiddle, with altered CSS http://fiddle.jshell.net/T3LmX/2/

Upvotes: 1

Related Questions