[lemoral]

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

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%", но это есть не совсем правильно, так как на разных дисплеях смотрится по разному. Вот как так сделать, чтобы фоторама занимала правильный размер?
Спасибо!