2017-10-11 64 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>

有誰知道這是爲什麼?

回答