2017-10-11 21 views
1

canvasタグに問題があります。私はそれを親divに追加する必要があります。しかし、親の正確な寸法を設定してcanvasタグを埋め込むと、スクロールバーが表示されます。私がdivと同じ考えをすると、うまくいく。ここではフィドルは次のとおりです。親の高さでキャンバスを追加するとスクロールバーが作成されます

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

、ここではコードです:

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

 
    var div = $('<div/>', {width: content1[0].clientWidth, height: content1[0].clientHeight}); 
 
    content1.append(div); 
 
\t 
 
    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>

は、誰もがなぜ知っていますか?

答えて

関連する問題