윈도우 리사이즈에 대해 문의드려요.
본문
레이어팝업 배경이 되는 div를 높이100% 넓이100%까진 했는데 브라우져 크기가 변했을때 리사이즈되게 하는
방법을 몰라서 문의드려요. 스크립트 고수님들 도와주세요.
<div>
<table width=1120 height="27" cellpadding=0 cellspacing=0 onmouseover=this.style.background="#dddddd" onmouseout=this.style.background="" style="cursor:pointer;" onclick="view_content(this)" id="faq_{.sno}">
<tr height=27>
<td align="left" width="24" valign="top" style="padding-top:5px;"><img src="../img/common/faq_q.gif" style="margin-top:3px;"></td>
<td align="left" valign="top" style="padding-top:5px;"><font style="font-size:15px; font-weight:bold;"><a href="../service/test.php?sitemcd={.codenum}" target="new">질문</font></td>
<td align="left">답변</td>
</tr>
</table>
<div style="display:none; position:absolute; top:0px; left:0px; text-align:center; z-index:1000; background-image:url(../img/new/back.png);" onclick="view_content(this)" id="faq_{.sno}">
<table cellpadding=0 cellspacing=0 border=0 width="100%">
<tr><td height="200"></td></tr>
<tr valign="top">
<td style="text-align:center;"><iframe src="../service/test.php?sitemcd={.codenum}" width="890" height="900" style="background-color:#ffffff;" scrolling="no" frameborder="0"></iframe></td>
</tr>
</table>
</div>
<div style="height:15px;"></div>
<br><br>
</div><!-- End indiv -->
<script language="javascript">
var preContent;
var windowWidth = $(window).width();
var windowHeight = $(window).height();
function view_content(obj)
{
var div = obj.parentNode;
for (var i=1, m=div.childNodes.length;i<m;i++) {
if (div.childNodes[i].nodeType != 1) continue; // text node.
else if (obj == div.childNodes[ i ]) continue;
obj = div.childNodes[ i ];
break;
}
if (preContent && obj!=preContent){
obj.style.display = "block";
preContent.style.display = "none";
}
else if (preContent && obj==preContent) preContent.style.display = ( preContent.style.display == "none" ? "block" : "none" );
else if (preContent == null ) obj.style.display = "block";
obj.style.width = windowWidth;
obj.style.height = windowHeight;
preContent = obj;
}
{ // 초기출력
var no = "faq_{_GET['ssno']}";
if ( document.getElementById( no ) ) view_content( document.getElementById( no ) );
}
</script>
답변 2
소스가 길어 읽어 보지 못했습니다.
일단 메타태그를 넣고 테스트 해 보시죠.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
테이블 자체와 td 심지어 tr에도 넓이값 높이값이 다들어가 있네요 일단 테이블부터 반응형으로 제작해보세요 ^^