Как сделать чтобы высота рассчитывалась не по размеру окна браузера, а по высоте родительского элемента div?

Question

[Alexchexes]

Есть вот такая замечательная галерея tutorialzine.com/2013/05/diagonal-fade-gallery
Моя цель - сделать не отдельную страницу с такой галереей, а встроить её в существующий лендинг.
К сожалению, я дундук в javascript, программировании вообще, да и лэндинг я делаю в WYSIWYG редакторе, изредка корректируя выходной html и css. Но кое-какого результата уже добился, за исключением того что встроенная мной галерея отображается сейчас криво, потому что высота её рассчитывается не исходя из размеров дива, в который я её приспособил, а, согласно скрипту из файла script.js, равняется высоте окна браузера.

Собственно, вот часть кода этого скрипта, отвечающая за рассчёт размеров галереи.

// Monitor window resizing or changing device orientation
	win.on('resize', function(e){

		var width = win.width(),
			height = win.height(),
			gallery_width, gallery_height,
			difference;

		// How many photos can we fit on one line?
		max_w_photos = Math.ceil(width/photo_default_size);

		// Difference holds how much we should shrink each of the photos
		difference = (max_w_photos * photo_default_size - width) / max_w_photos;

		// Set the global width variable of the pictures.
		picture_width = Math.ceil(photo_default_size - difference);

		// Set the gallery width
		gallery_width = max_w_photos * picture_width;

		// Let's do the same with the height:

		max_h_photos = Math.ceil(height/photo_default_size);
		difference = (max_h_photos * photo_default_size - height) / max_h_photos;
		picture_height = Math.ceil(photo_default_size - difference);
		gallery_height = max_h_photos * picture_height;

		// How many photos to show per page?
		per_page = max_w_photos*max_h_photos;

		// Resize the gallery holder
		gallery.width(gallery_width).height(gallery_height);

		gallery.trigger('window-resized');

	}).resize();

Что (и на что) здесь нужно изменить, чтобы размер всегда был равен размеру родительского div'а?

P.S. Ширина в 100% окна меня устраивает, то что нужно. Хотя тоже было бы интересно уметь и ей управлять с помощью родительского элемента, вдруг я другой лэндинг когда-нибудь делать буду...

Answer 1

[Alexchexes]

Всем спасибо!
Изменил

var width = win.width(),
height = win.height(),
gallery_width, gallery_height,
difference;

на

var width = win.width(),
height = 360,
gallery_width, gallery_height,
difference;

и всё заработало!

Answer 2

[Артем]

Дело не в JS, загляни в CSS
assets/css/styles.css

#gallery{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

галерея позиционируется фиксировано, если нужно по размеру блока, тогда так:

#gallery{
	position: relative;
	width:100%;
	height:100%;
}

Comments

[Alexchexes]

Не, не то, с css я возился долго и безрезультатно, пробовал и relative, и inherit, и значения свойства height как только не менял, в общем, по всякому, не помогает. Потом порылся в js и понял что дело именно в нём.