1

I have problem with canvas tag. I need to append it into parent div. But when I set precise dimensions of parent and embed canvas tag, I get scrollbars. When I do same think with div, it works good. Here is fiddle:

https://jsfiddle.net/57yovrkx/4/

and here is code: 

$(function() {
  var content1 = $('#content1');

  var div = $('<div/>', {width: content1[0].clientWidth, height: content1[0].clientHeight});
  content1.append(div);
 
  var content2 = $('#content2');
  var canvas = $('<canvas/>', {width: content2[0].clientWidth, height: content2[0].clientHeight});

  content2.append(canvas);
})
* {
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}
#wrap1, #wrap2 {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0; 
  overflow: auto;
}

#wrap1 {
  top: 0;
  bottom: 50%;
}

#wrap2 {
  top: 50%;
  bottom: 0;
}

.header {
  flex: 0 0 2rem;
  background: darkgrey;
}

#content1, #content2 {
  flex: 1;
}

#content1 {
  background: lightblue;
}

#content2 {
  background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap1">
  <div class="header">
    Some header
  </div>
  
  <div id="content1">
    
  </div>
</div>

<div id="wrap2">
  <div class="header">
    Some header
  </div>
  
  <div id="content2">
    
  </div>
</div>

Does anybody knows why?

Ajax
  • 576
  • 2
  • 8
  • 21

1 Answers1

0

Setting canvas.style.height = '100%'; before you append the canvas seems to do the trick.

https://stackoverflow.com/a/10215724/1482623

vinston
  • 61
  • 5