javascript - Why did the swiper-wrapper get ended up so big? - Stack Overflow

admin管理员组

文章数量:1353331

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

Share Improve this question Follow edited Apr 1, 2019 at 3:59 POP asked Mar 31, 2019 at 10:13 POPPOP 67122 gold badges88 silver badges2020 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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;
}

本文标签： javascriptWhy did the swiperwrapper get ended up so bigStack Overflow