묻고답하기
div height값 동적으로 변경하도록 만들고 싶습니다.
2014.04.15 23:29
안녕하세요^^
이번에도 열심히 xe 공부하면서 사이트 제작하고 있는 일인입니다.
고수님들의 조언을 얻고자 이렇게 질문 남깁니다.
우선 저는 LNB와 Contents 영역으로 나눠진 전형적인 레이아웃 형태로 제작하고 있습니다.
그런데 LNB 부분에는 BG가 있는데 이 이미지는 Footer 시작부분까지 BG가 연결되어 있습니다.
그래서 예전부터 사용하던 소스를 활용해 적용했습니다.
<script type="text/javascript">
/*------------------------------------------------------------------------------------------
// 화면 로드 후 처리
------------------------------------------------------------------------------------------*/
window.onload = function()
{
// div height 설정
setDivHeight('leftWrap','content');
}
/*------------------------------------------------------------------------------------------
// div height 설정
// objSet : 변경할 div id
// objTar : height값을 구할 대상 div id
------------------------------------------------------------------------------------------*/
function setDivHeight(objSet, objTar)
{
var objSet = document.getElementById(objSet);
var objTarHeight= document.getElementById(objTar).offsetHeight;
if(objSet.offsetHeight<objTarHeight){
objSet.style.height = objTarHeight + "px";
}
}
</script>
위와같은 소스는 leftWrap을 content의 height값에 따라 자동으로 변경하는 저에게 딱 맞는 기능이
적용된 소스입니다.
하지만 이 소스의 단점이라면 화면이로드된 이후 적용된다는 것입니다.
예를들어 contents 영역에 제가 display none과 block을 활용해 div를 넣었다면,
div1 번과 dvi2번이 버튼 하나로 페이지가 리로드 되지 않고도 보이도록 할 수 있습니다.
그런데 위 소스로 적용한 height값은 페이지 리로딩시 한번만 적용되고 고정이므로 완전한 동적이라고 할 수 없습니다.
예를들어
div1 1024px
div2 768px
이라면 위 소스 적용시 div1 contents 길이에 맞춰 height값이 1024px로 고정되어
div2 번으로 변경하더라도 768px 로 변경되지 않는다는 얘깁니다.
그래서 진정 화면 리로딩이 되지않더라도 동적으로 height값이 바뀌도록 하려면
어떻게 해야할지 고수님들의 조언좀 구하고자 합니다.
content 영역도 웹반응형으로 response 효과를 주고자 하는데
leftWrap 영역도 반응하도록 하려면 어떻게 해야할까요.
한단계 업그레이드 하고자 하는 초보 퍼블리셔에게 힘을주세요ㅠ
긴글 읽어주셔서 감사합니다^^
- [2008/12/29] 묻고답하기 w3c 마크업 테스트를 꼭 통과하고 싶었습니다.
- [2008/07/18] 웹마스터 팁 게시글 본문 좌, 우측에 div 내용 넣기(수정) *5
댓글 8
-
DynamicLaser
2014.04.15 23:47
-
DOUBLEP
2014.04.17 00:35
답변 감사합니다^^
엘리먼트의 onload, onresize 이벤트를 이용하라는 것은 jqeury 이벤트중 하나인거죠~?
제가 jquery는 잘 다루질 못해서 무지함에 다시 여쭤보았습니다.
그리고 아래 말씀해주신 container자체에 bg를 씌우는 방법도 있지만 leftWrap과 content 영역이 별도로
움직여야 해서 질문의 방법을 사용했습니다^^
혹시 onload 이벤트를 사용해서 할수 있는방법이 있을까요~?
-
DynamicLaser
2014.04.17 01:43
jquery가 아니라 바닐라 자바스크립트(순수 자바스크립트) 이벤트입니다.
onload는 게시물이 오픈되었을때, onresize는 특정 엘리먼트의 크기가 변화되었을때 이용하는 이벤트들입니다.
자바스크립트를 꼼꼼하게 가르쳐드릴정도의 수준은 아니여서 ^^; w3schools와 같은곳에서 javascript event로 찾아보시면 이해가 빠르실겁니다.
-
neostream
2014.04.16 01:34
css로 해결 가능할꺼같은데요. height:100%을 lnb 주시면 될듯하네요.
물론 body, html { height:100% } 적용을 해줘야겠죠.
-
DOUBLEP
2014.04.17 00:36
답변 감사합니다^^
css에서 해결하기 위해 leftWrap height값을 100%로 주고 body 값을 100%로 줬더니 오른쪽 content
height값과 상관없이 100%로 길어져 있어서 상기 질문의 방법을 사용했었습니다^^
-
투씨
2014.04.16 05:44
온로드 할 때 말고도 버튼을 누를때 setDivHeight function을 한번씩 불러주면 되지 않을까요
-
DOUBLEP
2014.04.17 00:38
투씨님 답변 감사합니다^^
말씀해주신 방법도 한번 테스트 해봐야 겠네요~
제가 jquery를 잘 다루지 못함에 제가 활용하는 소스에서 적용가능한지 테스트 해봐야겠습니다.
감사합니다.
-
애니즌
2014.04.17 15:43
음 잘못 답변을 달았군요..
궁금한 점이 있는데
컨텐츠 화면이 페이지 로딩 없이 크기가 변환된다고 하시는 것 같은데
그럼 해당 부분은 따로 파일이 로드되는 건가요? 아니면 단순히 크기 변환만 되는 애니메이션인가요?
그것에 따라 사용할 수 있는 방법이 달라지겠습니다.
엘리먼트의 onload, onresize 이벤트를 이용해보세요.
그보다 BG적용할거면 간단히 container하나 씌워주고 display:inline-block과 같은 처리해주어서 background-repeat 옵션주면 되는거 아닌가 싶습니다.