2012-07-21 9 views
2

오버플로가있는 div가 있고 내부에 캔버스가 있습니다. 아래로 스크롤하면 FF, Chrome 및 IE9의 맨 아래 부분이 나타납니다. 어떻게이 스트립을 없앨 수 있습니까?오버플로 -y가있는 div 안에 캔버스

빨간색 스트립은

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 

    #container { 
    overflow-y: scroll; 
    width: 900px; 
    height: 400px; 
    background-color: red; 
    } 

    #container canvas { 
    background-color: gray; 
    } 
</style> 
<script type="text/javascript"> 
    var init = function() { 
    var container = document.getElementById('container'); 
    var canvas = document.createElement('canvas'); 
    canvas.width = container.clientWidth; 
    canvas.height = 1000; 
    container.appendChild(canvas); 
    container.scrollTop = container.scrollHeight; 
    } 
    </script> 
</head> 
<body onload="init()"> 
    <div id="container"></div> 
</body> 
</html> 
+0

왜 회색으로 #container의 배경 색상을 변경하지? – gopi1410

+0

데모 : http://jsfiddle.net/userdude/fSgQN/ –

+1

@ gopi1410 그는 우리에게 문제를 보여주고 있습니다 –

답변

2

heredisplay: block;#container canvas에 추가 볼 수 있습니다 :

#container canvas { 
    background-color: gray; 
    display: block; 
} 

Demo

+0

일 수 있습니다 내 경우에는 위치를 포기 : 캔버스 및 위치 절대 : 컨테이너 작업에 상대도. 디스플레이 : 블록이 작동하는 이유는 이해하지만 처음부터 왜 필요한지 이해할 수 없습니다. – pablo