Bug Fix: Dimensions should've accepted a number with CSS relative units, such as 100vh or 10rem.

src/js/components/cover/index.js

@@ -17,6 +17,13 @@ import { find, applyStyle } from '../../utils/dom';
  * @return {Object} - The component object.
  */
 export default ( Splide, Components ) => {
+	/**
+	 * Hold options.
+	 *
+	 * @type {Object}
+	 */
+	const options = Splide.options;
+
 	/**
 	 * Cover component object.
 	 *
@@ -28,7 +35,7 @@ export default ( Splide, Components ) => {
 		 *
 		 * @type {boolean}
 		 */
-		required: Splide.options.cover && ( Splide.options.fixedHeight || Splide.options.heightRatio ),
+		required: options.cover	&& ( options.height || options.heightRatio || options.fixedHeight ),
 
 		/**
 		 * Called when the component is mounted.

src/js/components/layout/resolvers/horizontal.js

@@ -34,6 +34,20 @@ export default ( Splide, Components, options ) => {
 	 */
 	const track = Elements.track;
 
+	/**
+	 * Keep the fixed width if available.
+	 *
+	 * @type {number}
+	 */
+	let fixedWidth;
+
+	/**
+	 * Keep the fixed height if available.
+	 *
+	 * @type {number}
+	 */
+	let fixedHeight;
+
 	return {
 		/**
 		 * Margin property name.
@@ -59,6 +73,20 @@ export default ( Splide, Components, options ) => {
 				paddingLeft : unit( left ),
 				paddingRight: unit( right ),
 			} );
+
+			const firstSlide = Elements.slides[ 0 ];
+			const width      = options.fixedWidth;
+			const height     = options.height || options.fixedHeight;
+
+			if ( width ) {
+				applyStyle( firstSlide, { width: unit( width ) } );
+				fixedWidth = parseFloat( getComputedStyle( firstSlide ).width );
+			}
+
+			if ( height ) {
+				applyStyle( firstSlide, { height: unit( height ) } );
+				fixedHeight = parseFloat( getComputedStyle( firstSlide ).height );
+			}
 		},
 
 		/**
@@ -69,8 +97,6 @@ export default ( Splide, Components, options ) => {
 		 * @return {number} - Slide width in px.
 		 */
 		getSlideWidth( includeGap ) {
-			const fixedWidth = options.fixedWidth;
-
 			if ( fixedWidth ) {
 				return includeGap ? fixedWidth + this.gap : fixedWidth;
 			}
@@ -85,8 +111,7 @@ export default ( Splide, Components, options ) => {
 		 * @return {number} - Slide height in px.
 		 */
 		getSlideHeight() {
-			const heightRatio = options.heightRatio;
-			return heightRatio > 0 ? this.width * heightRatio : options.fixedHeight;
+			return fixedHeight || this.width * options.heightRatio || 0;
 		},
 
 		/**

src/js/components/layout/resolvers/vertical.js

@@ -6,6 +6,7 @@
  */
 import { applyStyle } from "../../../utils/dom";
 import { unit } from "../../../utils/utils";
+import { exist } from "../../../utils/error";
 
 
 /**
@@ -32,6 +33,27 @@ export default ( Splide, Components, options ) => {
 	 */
 	const track = Elements.track;
 
+	/**
+	 * Keep the fixed width if available.
+	 *
+	 * @type {number}
+	 */
+	let fixedWidth;
+
+	/**
+	 * Keep the fixed height if available.
+	 *
+	 * @type {number}
+	 */
+	let fixedHeight;
+
+	/**
+	 * Keep the temporary listHeight.
+	 *
+	 * @type {number}
+	 */
+	let listHeight;
+
 	return {
 		/**
 		 * Margin property name.
@@ -50,6 +72,25 @@ export default ( Splide, Components, options ) => {
 				paddingTop   : unit( top ),
 				paddingBottom: unit( bottom ),
 			} );
+
+			const firstSlide = Elements.slides[ 0 ];
+			const { fixedWidth: fixedW, fixedHeight: fixedH, height } = options;
+
+			if ( fixedW ) {
+				applyStyle( firstSlide, { width: unit( fixedW ) } );
+				fixedWidth = parseFloat( getComputedStyle( firstSlide ).width );
+			}
+
+			if ( fixedH ) {
+				applyStyle( firstSlide, { height: unit( fixedH ) } );
+				fixedHeight = parseFloat( getComputedStyle( firstSlide ).height );
+			}
+
+			if ( height ) {
+				const list = Elements.list;
+				applyStyle( list, { height: unit( height ) } );
+				listHeight = parseFloat( getComputedStyle( list ).height );
+			}
 		},
 
 		/**
@@ -58,7 +99,7 @@ export default ( Splide, Components, options ) => {
 		 * @return {number} - Slide width in px.
 		 */
 		getSlideWidth() {
-			return this.width;
+			return fixedWidth || this.width;
 		},
 
 		/**
@@ -69,7 +110,7 @@ export default ( Splide, Components, options ) => {
 		 * @return {number} - Slide height in px.
 		 */
 		getSlideHeight( includeGap ) {
-			const height = ( this.listHeight + this.gap ) / options.perPage;
+			const height = fixedHeight || ( this.listHeight + this.gap ) / options.perPage;
 			return includeGap ? height : height - this.gap;
 		},
 
@@ -97,13 +138,8 @@ export default ( Splide, Components, options ) => {
 		 * @return {number} - Current list height.
 		 */
 		get listHeight() {
-			const heightRatio = options.heightRatio;
-			let height = options.height;
-
-			if ( heightRatio > 0 ) {
-				height = this.width * heightRatio;
-			}
-
+			const height = listHeight || this.width * options.heightRatio;
+			exist( height, '"height" or "heightRatio" must be given in TTB mode.' );
 			return height - this.padding.top - this.padding.bottom;
 		},
 

src/js/constants/defaults.js

@@ -42,6 +42,13 @@ export const DEFAULTS = {
 	 */
 	width: 0,
 
+	/**
+	 * Define slider height.
+	 *
+	 * @type {number}
+	 */
+	height: 0,
+
 	/**
 	 * Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
 	 * perPage number will be ignored when this option is falsy.

tests/functionality/layout.test.js

@@ -15,11 +15,24 @@ describe( 'The Layout ', () => {
 	} );
 
 	test( 'should apply height to a slide element when a "height" option is provided.', () => {
-		const splide = new Splide( '#splide', { fixedHeight: '40em' }, COMPLETE );
+		const splide = new Splide( '#splide', { height: 400 }, COMPLETE );
 		splide.mount();
 
-		const slide = splide.Components.Elements.slides.pop();
-		expect( slide.style.height ).toBe( '40em' );
+		const slide = splide.Components.Elements.slides[ 0 ];
+		expect( slide.style.height ).toBe( '400px' );
+
+		global.innerHeight = 100;
+
+		splide.options = { height: '10vh' };
+		expect( slide.style.height ).toBe( 100 / 10 + 'px' ); // window height / 10.
+	} );
+
+	test( 'should apply height to a slide element when a "fixedHeight" option is provided.', () => {
+		const splide = new Splide( '#splide', { fixedHeight: 400 }, COMPLETE );
+		splide.mount();
+
+		const slide = splide.Components.Elements.slides[ 0 ];
+		expect( slide.style.height ).toBe( '400px' );
 	} );
 
 	test( 'should set proper width of a slide element according to a perPage option in horizontal mode.', () => {
@@ -33,7 +46,7 @@ describe( 'The Layout ', () => {
 
 		splide.emit( 'resize' );
 
-		const slide = splide.Components.Elements.slides.pop();
+		const slide = splide.Components.Elements.slides[ 0 ];
 		expect( slide.style.width ).toBe( '400px' );
 
 		// Is the width updated correctly after perPage option is updated?
@@ -49,7 +62,7 @@ describe( 'The Layout ', () => {
 
 		Object.defineProperty( track, 'clientWidth', { value: 800 } );
 
-		const slide = splide.Components.Elements.slides.pop();
+		const slide = splide.Components.Elements.slides[ 0 ];
 		expect( slide.style.height ).toBe( '200px' );
 
 		splide.options = { perPage: 4 };
@@ -59,7 +72,7 @@ describe( 'The Layout ', () => {
 	test( 'should set margin according to a gap size.', () => {
 		const splide = new Splide( '#splide', { gap: 10 }, COMPLETE );
 		splide.mount();
-		const slide  = splide.Components.Elements.slides.pop();
+		const slide  = splide.Components.Elements.slides[ 0 ];
 		expect( slide.style.marginRight ).toBe( '10px' );
 	} );
 } );