움직이는 우측 퀵메뉴 움직이는 범위를 어떻게 지정해줄수있나요? 정보
움직이는 우측 퀵메뉴 움직이는 범위를 어떻게 지정해줄수있나요?본문
포지션은 픽스 상태고 다른 효과는 없습니다
우측에 그냥 붙어다니는데요
소스는
---------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<style type="text/css">
/*퀵*/
div#quickTop{
position:fixed;
top: 94px;
}
/*바디*/
html, body {margin:0; padding:0; height:100%; }
/*본문테이블*/
#con {position:relative; width:100%; height:100% !important; height:100%; min-height:100%;}
/*풋터레이어는 포지션 속성없이 그냥 테이블에 하단정렬*/
</style>
</head>
<body>
<table id="con" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"> <table border='0' cellpadding='0' cellspacing='0' width='1056px'>
<tr valign='top' align='left'>
<td>
</td>
<td width='95'>
<!--퀵메뉴-->
<div id="quickTop">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom">
<!--풋터-->
<table id="footer_layer" width="100%" height="200px" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td bgcolor="#000000">
</td></tr></table>
<!--풋터끝-->
</td>
</tr>
</table> </body> </html>
---------------------------------------------------------------
이렇게 됩니다 이게 스크롤을 내리면 하단풋터와 겹치게 됩니다. 하단풋터 위에겹쳐서 자리잡게되고요
이것때문에 정말골치아픕니다ㅜㅜ 이럴때 아무리 스크롤을 내려도 하단풋터의 높이만큼 침범을 안하게 해주려면 어떻게해야하나요?
좀도와주시면 감사하겠습니다ㅠ
댓글 전체
내용을 좀 넣어야 하는건가? ㅎ 익스에서 봐서 그런강? 사파리도 안나옴 ㅠ
1. 자바스크립트를 쓴다. 스크립트를 이용해서 페이지의 높이를 구하고 푸터에 겹치는 페이지의 높이부터 퀵메뉴를 임의 조절한다.(무조건 됨!)
2. css를 넣을때 퀵 메뉴에 height 와 bottom 을 높이에 푸터의 높이만큼을 더해서 지정한다.(이건 소스에 따라 다름....)
모 몇가지 방법이 더 있겠지만 ㅡㅡ;; 소스가 테스트가 안됨으로..... ㅎ
소스를 다시 올려주시거나 쪽지로 보내주시면 수정해서 보내드릴게용~
다시수정한 소스는 이렇게됩니다.
---------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
/*퀵*/
div#quickTop{
position:fixed;
top: 94px;
}
/*바디*/
html, body {margin:0; padding:0; height:100%; }
/*본문테이블*/
#con {position:relative; width:100%; height:100% !important; height:100%; min-height:100%;}
/*풋터레이어는 포지션 속성없이 그냥 테이블에 하단정렬*/
</style>
</head>
<body>
<table id="con" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"> <table border='0' cellpadding='0' cellspacing='0' width='1056px'>
<tr valign='top' align='left'>
<td><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
ccc</td>
<td width='95'>
<!--퀵메뉴-->
<div id="quickTop">
<br />cc<br />cc<br />cc<br />cc<br /> <br />cc<br />cc<br />cc<br />cc<br /> <br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cccc<br />cc<br />cc<br />cc<br />cc<br />cc<br />cc
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom">
<!--풋터-->
<table id="footer_layer" width="100%" style="height:300px" border="1" >
<tr>
<td bgcolor="#000000">
</td></tr></table>
<!--풋터끝-->
</td>
</tr>
</table> </body> </html>
--------------------------------------------------------------------
어떻게해야될까요?ㅠ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<style type="text/css">
/*바디*/
html, body {margin:0; padding:0; height:100%; }
/*퀵*/
div#quickTop{
position:fixed;
top: 100px;
bottom:100px;
background:#ff6600;
}
#header {
background:#f3f3f3;
height:100px;
}
#footer {
color:#fff;
background:#000;
height:100px;
}
</style>
</head>
<body>
<div class="page">
<div id="header">
Header
</div>
<div id="content">
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
ccc
</div>
<div id="footer">
Footer
</div>
<div id="quickTop">
Quick
</div>
</div>
</body>
</html>
