Question

以下代码包含三个div，每个div包含一个 p 元素， canvas 元素和按钮元素。

如何使画布尽可能地扩展和占据宽度和高度，只留下顶部的 p 元素和底部的按钮元素的空间所以网页看起来像

**Welcome to Canvas**
|--------------------------------|
|                                |
|  expand full width and height  |
|                                |
|                                |
|                                |
|                                |
|                                |
|                                |
|                                |
|                                |
|--------------------------------|
BUTTON

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>HELLO</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <div class="div_parent">
      <div class="div_child0_title">
    <p>Welcome to canvas</p>
      </div>
      <div class="div_child1_canvas">
    <canvas id="canvas"></canvas>
      </div>
      <div class="div_child3_button">
    <button id="playButton" type="button">Play</button>
      </div>
    </div>
    <script src="/javascripts/vendor/jquery-1.11.0.min.js"></script>
    <script>
      $(document).ready(function () {
      var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d');
      context.strokeStyle = "green";
      context.strokeRect(0, 0, canvas.width, canvas.height);
      });
    </script>
  </body>
</html>

不起作用的CSS

html, body {
    margin: 0px;
}

.div_parent {
    position: relative;
    width: 100%;
    height: 100%;
}

.div_child1_canvas {
    position: relative;
    width: 100%;
    height: 100%;
}

如何在不启用滚动条的情况下使canvas元素展开并占用所有剩余可用空间

0 个答案: