Форум

lemoral · #1 (**permalink**) 26.03.2015, 14:41

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

Код:

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

рони · #2 (**permalink**) 26.03.2015, 16:32

lemoral,
макет бы полностью ?
а так вроде нормально работает

<!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>

lemoral · #3 (**permalink**) 26.03.2015, 21:47

рони,
тут еще в том проблема, что прокрутки быть не должно.... то есть чтобы страница целиком без прокрутки умещалась на экране...а когда масштаб 100% - появляется прокрутка...http://my-files.ru/z6u6a4 - макет полностью

рони · #4 (**permalink**) 27.03.2015, 01:22

lemoral,
можно вычислить maxheight при загрузке страницы но это не спасает от изменения потом окна по высоте

$(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>

Форум

Справочник

Discord чат

Курсы javascript