창 크기를 기준으로 HTML5 웹 페이지 크기 조정

두 개의 캔버스 요소가있는 HTML5 웹 페이지를 가져오고 웹 페이지의 창에 따라 크기를 조정합니다. 제대로 작동 내가 같은 방법으로 높이를 조절하는 방법을 알아낼 수 없습니다, 그러나창 크기를 기준으로 HTML5 웹 페이지 크기 조정

<div id="treeArea"class="container" style="width:100%">

입니다

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <div id="treeArea"class="container" style="width:100%"> 
     <canvas id="canvas" class="canvas" width="3920" height="2080" style="z- index:1;"></canvas> 
     <canvas id="animCanvas" class="canvas" width="3920" height="2080" style="z-index:2;"></canvas> 
    </div> 
    <input type="file" id="fileinput" /> 
    <output id="list"></output> 
    <script type="text/javascript" src="leafNodes.js"></script> 
</head> 
<body onload=initialise()> 
</body> 
</html>

부분 : 여기에 내 현재 코드입니다. 나는 height : 100 % in을 넣는 것으로 명백하게 해봤지만 작동하지 않는다.

** 나는 또한 HTML5와 CSS가 처음이므로 설명에 관대해야합니다.

출처

2014-04-04 SHIELDHEAD

body 태그 대신 head 태그 안에 DOM 요소가있는 것 같습니다. 이 설정을 수정 한 후에 height: 100%이 작동해야합니다.

출처

2014-04-04 18:45:15

귀하의 제안을 시도했지만 동일하게 유지됩니다. – SHIELDHEAD

창 크기를 기준으로 HTML5 웹 페이지 크기 조정

답변

관련 문제