Javascript-форум - Верстка страницы со слайдером Fotorama

Помогите, пожалуйста, с версткой страницы!
Имеется следующая разметка:

Код:

body {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

  margin: 0;

-webkit-animation: bugfix infinite 1s;   

}



main {

  flex: 1;

  -ms-flex-preferred-size: auto;

  background: blue;

  position: relative;

}



header{   

  background-color: green;

  height: 100px;

} 



footer {   

background-color: red;

height: 25px;

z-index: 10000;

position: fixed;

left: 0; 

bottom: 0; 

padding: 10px; 

background: #39b54a; 

color: #fff; 

 width: 100%; 

}

В блоке main нужно разместить, я думаю, всем известный слайдер Fotorama. Я делаю это таким образом:

Код:

<main>

<div id="gallery">

<div id="container1" >

        <div class="fotorama" 

                data-nav="thumbs" 

                data-thumbBorderColor="#b4193b" 

                data-navPosition="bottom" 

                data-fit="cover" 

                data-width="100%" 

                data-maxheight="84%"

                data-fitToWindowHeight="true" 

                data-aspectRatio="1.5"

                data-caption="overlay"

                data-cropToFit="true" 

                data-flexible="true" >

                        <img src="gallery/1.jpg">

                        <img src="gallery/2.jpg">

                        <img src="gallery/3.jpg">

        </div>                

</div>

Вопрос следующий: как сделать, чтобы фоторама занимала строго всю область блока main, ни больше, ни меньше? Я это сейчас сделал с помощью maxheight="84%", но это есть не совсем правильно, так как на разных дисплеях смотрится по разному. Вот как так сделать, чтобы фоторама занимала правильный размер?
Спасибо!

<!DOCTYPE html> <html> <head> <title>Basic fotorama</title> <meta charset="utf-8"> <meta name="viewport" content="width=720"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.5.2/fotorama.js"></script> <style type="text/css"> body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; -webkit-animation: bugfix infinite 1s; } main { flex: 1; -ms-flex-preferred-size: auto; background: blue; position: relative; } header{ background-color: green; height: 100px; } footer { background-color: red; height: 25px; z-index: 10000; position: fixed; left: 0; bottom: 0; padding: 10px; background: #39b54a; color: #fff; width: 100%; } </style> </head> <body> <main> <div id="gallery"> <div id="container1" > <div class="fotorama" data-allowfullscreen="true" data-nav="thumbs" data-thumbBorderColor="#b4193b" data-navPosition="bottom" data-fit="cover" data-width="100%" data-maxheight="100%" data-fitToWindowHeight="true" data-aspectRatio="1.5" data-caption="overlay" data-cropToFit="true" data-flexible="true" > <img src="http://s.fotorama.io/1.jpg"> <img src="http://s.fotorama.io/2.jpg"> <img src="http://s.fotorama.io/3.jpg"> </div> </div> </div></main> </body> </html>

$(document).ready(function(){ var maxheight = ($(window).height()-150)/$(window).height()*100 ; $('.fotorama').data('maxheight', maxheight + '%') ; $("body").css("display","none").fadeIn("slow"); }); </script> <script src="js/fotorama.js"></script> </body></html>