블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

유독 IE6에서 position:fixed로 했을 경우 고정되지 않는 버그패치
javascript로 패치할 경우 : http://www.doxdesk.com/file/software/js/fixed.js 참조

* { margin:0; padding:0;} /* html, body 사이의 간격을 제거 */
html { _overflow-y:hidden;} /* 기본 스크롤 제거 */
body{ height:100%; _overflow-y:auto;} /* 대체 스크롤 생성 */
#content { width:580px; height:1000px; margin:20px; padding:10px; background:#eeeeee;}
#aside { position:fixed; _position:absolute; left:650px; top:20px; width:100px; height:300px; padding:10px; background:#dddddd;}

일케 해봤으나 스크롤이 이상하게 생기는 문제가 발생하여


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<style>
html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); _overflow: hidden;  }
:root html { overflow: hidden; }
body { _overflow: hidden; height: 100%; width: 100%; }
:root body { overflow: hidden; }
#dvwrap { width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; position:relative; z-index:1; /* padding-bottom: 40px; */}
#SLIPAREA { position:fixed; _position:absolute;  bottom: 0px; width: 900px; z-index: 199; margin: 0 0 -1px 10px; _margin: 0 0 -1px 10px; }
:root #SLIPAREA { width: 100%; }
</style>

<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<div id="dvwrap">
 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
 1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
</div>
<div id="SLIPAREA">
 <script type="text/javascript">
 function techbug(){
  var h = document.getElementById('testSlip').style.height;
  if( parseInt(h) < 30 )
   document.getElementById('testSlip').style.height = "200px";
  else
   document.getElementById('testSlip').style.height = "20px";

 }
 </script>
 <div id="testSlip" style="border:#000 solid 1px width:888px;height:20px;background:orange">
  <a href="javascript:techbug();">눌러</a>
 </div>

</div>
</body>
</html>



샘플 :



 

Post by 넥스트리소프트 데꾸벅(techbug)
, |