IE6에서 CSS로 fixed로 했을경우 고정되지 안는 문제
javascript로 패치할 경우 : http://www.doxdesk.com/file/software/js/fixed.js 참조
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>
샘플 :
'Scripter > JAVASCRIPT' 카테고리의 다른 글
getBoundingClientRect in FF3 (3) | 2008.06.25 |
---|---|
FF3에서의 window.showModalDialog (0) | 2008.06.24 |
Mouse wheel programming in JavaScript (0) | 2008.05.08 |
IE7에서 파일업로드 미리보기 기능 (0) | 2008.04.22 |
IE에서 Javascript 로컬 실행(ActiveX 창뜰때) (8) | 2008.04.17 |