[JavaScript/CSS] Slick Slider 오류

 

목차

• 문제 상황
• 해결
• [css] height: 100% vs height: auto

 

 

 

문제 상황

slick 라이브러리를 이용하여 웹뷰에 롤링 배너를 구현하는 중에 iOS에서만 초기 렌더링시에 이미지가 정상적으로 출력되지 않는 문제가 발생했다. (아직까지 왜 iOS에서만 그런 현상이 일어나는지 파악하지 못했다 ..  ) 

 

오류 화면

 

위 사진처럼 상단 메뉴 바로 아래 롤링 배너가 있어야 하는데 이미지가 로드는 되었지만 잘리는 것처럼 보였다.  css 파일 내 .slick-slide의 min-height:1px 이었는데 해당 사이즈가 min-height으로 잡히는 것이었다.  

 

 

 

💡해결

구글링 끝에 stack overflow에서 아래와 같은 글을 발견했다. 

https://stackoverflow.com/questions/45735511/slick-slider-gets-wrong-width

 

위 방법으로는 해결되지 않았다. 

 

 

https://stackoverflow.com/questions/45735511/slick-slider-gets-wrong-width

.slick-slide 내 height: 100%로 되어 있던 것을 height: auto로 변경했더니 해결되었다. 

 

 

 

 

[CSS] height: 100% vs height: auto

• height: 100%
  • 부모 컨테이너의 높이를 100%로 설정한다. 부모 컨테이너 높이에 영향을 받는다. 

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv의 height는 50px이 된다. 

 

• height: auto
  • 자식의 높이에 맞게 설정된다. 자식 엘리먼트의 높이에 영향을 받는다. 

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv의 height는 10px이 된다. 

 

 

 

참고

https://stackoverflow.com/questions/15943009/difference-between-css-height-100-vs-height-auto