I use swiper.js.
Below, there is the actual demo site.

Problem

There is a mystery gap below..

This turned out to be probably due to swiper-wrapper or swiper-slide,
but why did this happen?

How to this fit the element? (How can I fix this space?)

Demo site

Real site is here

JSFiddle (fullscreen)
JSFiddle

Could you please give me a hand?

Add: Current status

▼ If I change the width or height of the browser, it will be ended up covered with the next slide.

▲ When I checked with the developer tool of Chrome, it turned out that the height of the contents part is very large. (It may be easy to understand if you look at the bottom of gif.)

How can I eliminate the extra height at the bottom of the contents?

I use swiper.js.
Below, there is the actual demo site.

Problem

There is a mystery gap below..

This turned out to be probably due to swiper-wrapper or swiper-slide,
but why did this happen?

How to this fit the element? (How can I fix this space?)

Demo site

Real site is here

JSFiddle (fullscreen)
JSFiddle

Could you please give me a hand?

Add: Current status

▼ If I change the width or height of the browser, it will be ended up covered with the next slide.

▲ When I checked with the developer tool of Chrome, it turned out that the height of the contents part is very large. (It may be easy to understand if you look at the bottom of gif.)

How can I eliminate the extra height at the bottom of the contents?

• javascript
• jquery
• html
• css
• swiper.js

2 Answers 2

There are 2 things to do here:

1. Correct width and height of .wrap and #content

You give them specified diemensions (width and height with percent and calc()). But then you expend those values by using padding and border. Both, padding and border by default expand diemensions of a block element. Add box-sizing: border-box; to them both, and then they will have width and height you set - the padding and border (! but nor margin) will be put inside them.

2. Add max-height: 100%; to .swiper-container

height: auto; means that element will get height of the content that is inside of it.

If you set height (or max-height) with a value (pixels, percent .. whatever) it will refer to the parent.

You could also add overflow: hidden; instead of max-height to #content - overall effect would be the same - but it makes more sense to limit the height of .swiper-container.

.wrap {
  box-sizing: border-box;
}
#content {
  box-sizing: border-box;
}
.swiper-container {
  max-height: 100%;
}

Working JSFiddle

I used max-content on swiper slide and that works for me

.swiper-slide {
  height: -webkit-max-content!important;
  height: -moz-max-content!important;
  height: max-content!important;
}