See the Pen [jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) by zzzznara (@zzznara) on CodePen.
3단 레이아웃일 경우, 상단/좌측하단/우측하단 이렇게 구분이 되는데요.
이미지나 내용이 많을 경우 좌측하단과 우측하단의 높이가 일치하지 않는 문제가 생깁니다.
이럴 때 사용하면 좋을 것 같네요~
예제에서 처음 화면이 열릴 때 좌우측 하단의 높이가 다릅니다.
좌측하단 높이 : 300px
우측하단 높이 : 100px
하지만, setTimeout() 함수로 2초 후에 equalHeights() 함수를 호출하여 높이를 같게 해줍니다.
물론, 실제 레이아웃 등에 사용할 때는 setTimeout() 함수는 필요없으므로 제거하시면 됩니다.
equalHeights() 함수만 가져다 잘 사용하시면 됩니다.
또한, 이곳에서 $(window).load(); 함수를 사용한 이유는
$(document).ready(); 함수는 이미지가 호출되지 않아도 실행이 되는 함수이고
$(window).load(); 함수는 이미지 등이 모두 로드된 후에 실행되기 때문입니다.
'프로그래밍 언어 > jQuery' 카테고리의 다른 글
| [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 (0) | 2018.11.12 |
|---|---|
| [제이쿼리 플러그인 소스] inputbox에서 커서가 원하는 곳에 위치하게 하는 jquery plugin (0) | 2018.10.25 |
| [jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) (0) | 2018.05.31 |
| [jQuery] jqtransform의 selectbox의 option 추가해도 안 보이는 문제 해결방법 (0) | 2018.05.23 |
| [jQuery] form의 inputbox, selectbox, radio 버튼을 예쁘게 꾸며주는 jqtransform 플러그인을 소개합니다. (0) | 2018.05.23 |
댓글