2011-01-24 8 views
12

मैं html5 कैनवास तत्व का परीक्षण कर रहा था, और मेरे कैनवास को प्रदर्शन क्षेत्र में पूर्ण स्क्रीन होने की कामना करता हूं। लेकिन मैंने पाया कि क्या मैंने खिड़की के लिए कैनवास ऊंचाई सेट की है। रात्रिभोज, स्क्रॉल बार दिखाया जाएगा। मैंने कोशिश की और ऊंचाई को 5 पिक्सेल कम करने की आवश्यकता है, स्क्रॉल बार गायब हो जाएगा, लेकिन दुर्भाग्य से यह कैनवास के नीचे एक सफेद सीमा छोड़ दिया। यदि यह एक div तत्व है, तो सब कुछ ठीक है।मैं html5 कैनवास की अतिरिक्त ऊंचाई को कैसे हटा सकता हूं?

कोड मैं परीक्षण करने के लिए उपयोग कर रहा हूँ है:

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<script type="text/javascript"> 
function load() { 
    var o = document.getElementById('canvas'); 
    if (o) { 
     o.width = window.innerWidth; 
     o.height = window.innerHeight - 5; 
    } 
    o = document.getElementById('div'); 
    if (o) { 
     o.style.width = window.innerWidth + 'px'; 
     o.style.height = window.innerHeight + 'px'; 
    } 
} 
</script> 
<style type="text/css"> 
* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    background-color: white; 
} 
#canvas { 
    background-color: blue; 
} 
#div { 
    background-color: green; 
} 
</style> 
</head> 
<body onload="load();"> 
<canvas id="canvas"></canvas> 
<!--div id="div"></div--> 
</body> 
</html> 

मैं शरीर मार्जिन और गद्दी साफ़ कर दिया है।

मैं क्रोम 8.0.552 पर इसका परीक्षण करता हूं, और यह फ़ायरफ़ॉक्स 3.6.13 पर भी कार्य करता है लेकिन 4 पिक्सेल कम ठीक है।

मुझे कुछ भी याद आया? किसी भी सुझाव की सराहना की जाएगी। बहुत बहुत धन्यवाद।

उत्तर

18

डिफ़ॉल्ट रूप से canvas, div के विपरीत, display: inline; है, इसलिए यह vertical-align: baseline; पर सेट हो जाता है।

#canvas { 
    background-color: blue; 
    vertical-align: top; 
} 

या::

#canvas { 
    background-color: blue; 
    display: block; 
} 
आप बनाने के लिए चीजों को स्वाभाविक रूप से window.innerHeight भरने निम्नलिखित किसी उपाय का समय लग सकता है
संबंधित मुद्दे