HTML CSS 이중 스크롤바 없애기

상황

쇼핑몰 프로젝트 작업 중 상품목록 페이지에 스크롤바가 두개 생겼다.

상품목록을 테이블로 만들었는데, 테이블이 중간에 끊겨서 끝번호 상품까지 보이지 않았다. 대신 테이블 안에 스크롤바가 하나 더 생겨서 그 스크롤바를 내리면 끝까지 볼 수 있었다.

 

 

해결

해당 부분 <div>의 높이가 상품리스트 전체를 보여주기에 충분하지 않기 때문에 스크롤이 하나 더 생기는 것이다.
<div>의 높이 값을 100%로 설정하니 리스트가 전부 다 보이고 이중 스크롤바도 사라졌다. 

 

ex) style="height: 100%;"