Question

我在这里搜索了属性display: block应该已经修复了画布和div之间的差距，但由于某种原因，差距仍然存在。

function SetHeight(canvas)
{
  var div       = $(".outer");
  canvas.width  = div.innerWidth();
  canvas.height = div.innerHeight();
  console.log(div.innerHeight(), div.height(), canvas.height);
}

$(document).ready(function(){
  var canvas    = $("#canvas")[0];
  SetHeight(canvas);
  $(window).on("resize", function(){
     SetHeight(canvas);
  });
});

html,
body {
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  /*width: 100%; font-size:100%*/
}

canvas {
  background-color: grey;
  display: block;
}

.outer {
  padding: 0;
  top: 20%;
  height: 60%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer col-xs-12">
  <canvas id="canvas" class="col-xs-12"></canvas>
</div>

从我在控制台上看到的内容0.2和div.innerHeight()之间存在canvas.height差异。

div.innerHeight()等于div.height()。

我尝试过：

将line-height :0设置为.outer和`canvas
将vertical-align: bottom设为canavs

这是在codepen.io上编码的，如果它完全产生差异

Answer 1

帆布高度固定的CSS解决方案

在我看来，差距来自于.outer和<canvas>的高度不匹配，我已经使用以下方法解决了这个问题：

canvas {
  background-color: grey;
  position: absolute;
  width: 100%;
  height: 100%;
}

并向position: relative;

提供.outer

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  /*width: 100%; font-size:100%*/
}

canvas {
  background-color: grey;
  position: absolute;
  width: 100%;
  height: 100%;
}

.outer {
  padding: 0;
  top: 20%;
  height: 60%;
  border: 1px solid black;
  position: relative;
}

＆＃13;

<div class="outer col-xs-12">
  <canvas id="canvas"></canvas>
</div>

＆＃13;

现在为您的代码段修改

jQuery您的bootstrap CSS工作正常，.col-xs-12课程padding将<div>添加到<canvas>和padding:0 !important;填补空白

要解决此问题，我只使用了.outer <canvas> div和function SetHeight(canvas) { var div = $(".outer"); canvas.width = div.innerWidth(); canvas.height = div.innerHeight(); console.log(div.innerHeight(), div.height(), canvas.height); } $(document).ready(function(){ var canvas = $("#canvas")[0]; SetHeight(canvas); $(window).on("resize", function(){ SetHeight(canvas); }); });检查下面的小提琴：

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  /*width: 100%; font-size:100%*/
}

canvas {
  background-color: grey;
  display: block;
  padding:0 !important;
  
}

.outer {
  padding:0 !important;
  top: 20%;
  height: 60%;
  border: 1px solid black;
  overflow:hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="outer col-xs-12">
  <canvas id="canvas" class="col-xs-12"></canvas>
</div>

＆＃13;

$tempArray = array();
$sortedArray = array();

foreach ($yourArray as $key1 => $arr){// create 2D array

    foreach ($arr as $key2 => $arr2){
        $tempArray[] = $arr2;        
    }

}

foreach ($tempArray as $keyTemp => $tempElem){

    $sortingArray[] = $tempElem[0];//get array value you need to sort

}    
asort($sortingArray);// sort array maintaining the key

foreach ($sortingArray as $keySort => $sortElem){//loop through sorted array to push elements to a new array
    $sortedArray[] = $tempArray[$keySort];
}

print_r($sortedArray);

＆＃13;

希望这对你有所帮助。

Answer 2

weBer's answer在技术上是更好的方法，因为选项 - 在浏览器中使用CSS计算的维度比JavaScript更快，更准确。但是，由于您已经要求，我将继续使用JavaScript方法。

因为您正在使用jQuery来衡量＆＃34;渲染高度，结果通常不是整数。在大多数浏览器中，分数像素值的渲染不会太精确，它们通常只会向上或向下舍入。

如果你想使用JS而不是CSS，在修改画布大小之前将div高度舍入到最近的像素：

div.height(Math.round(div.height()));

（我应该重申，这远非一种理想的技术 - 我将它作为解决你的具体问题的答案，并解释它为什么会发生。）

这样做也会留下第二个问题 - box-sizing模式是内容框，这意味着div边框将高度增加1px（留下间隙）。要解决此问题，请将div设置为：

box-sizing: border-box;

完整代码段

＆＃13;

function SetHeight(canvas)
{
  var div       = $(".outer");
  
  // Round the div height to the nearest pixel
  div.height(Math.round(div.height()));
  
  canvas.width  = div.innerWidth();
  canvas.height = div.innerHeight();
  console.log(div.innerHeight(), div.height(), canvas.height);
}

$(document).ready(function(){
  var canvas    = $("#canvas")[0];
  SetHeight(canvas);
  $(window).on("resize", function(){
     SetHeight(canvas);
  });
});

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  /*width: 100%; font-size:100%*/
}

canvas {
  background-color: grey;
  display: block;
}

.outer {
  /* ADD BORDER-BOX TO REMOVE GAP */
  box-sizing: border-box;

  padding: 0;
  top: 20%;
  height: 60%;
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer col-xs-12">
  <canvas id="canvas" class="col-xs-12"></canvas>
</div>

＆＃13;

块显示画布底部仍有间隙

2 个答案: