쓸만한 주저리

[CSS] Header, Footer 고정 상태의 가변 Scroll 영역

봄돌73 2009. 6. 23. 12:19

〈html>
    〈head>〈/head>
〈body leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 style=height:100%;overflow:hidden;background:black>
        〈div style="padding:50px 0px 50px 0px;height:100%">
          〈div style="border:1px solid;background:white;height:100%;overflow-y:scroll">
            start〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>
            ttttttttttttttt〈br>

            end
          〈/div>
        〈/div>
        〈div style="position:absolute;top:0px;height:50;width:100%;background:silver;color:white">top〈/div>
        〈div style="position:absolute;bottom:0px;height:50;width:100%;color:white">bottom〈/div>
    〈/body>
〈/html>



이 기능은 IE 전용이다.

IE7에서 작동함을 확인했고, 불여우에서는 작동하지 않음을 확인했다.

또한, DTD 선언을 할 경우 작동하지 않는다.

아래 첨부를 받아서 쉽게 확인할 수 있다.


ttt.html


ttt.html
0.0MB