एचटीएमएल पेज और ब्राउज़र विंडो का आकार सेट करें

मेरे पास आईडी = "कंटेनर" वाला एक div तत्व है। मैं इस तत्व को ब्राउज़र विंडो में देखने योग्य क्षेत्र का आकार मानना चाहता हूं। मैं ऐसा करने के लिए निम्नलिखित जेएस का उपयोग कर रहा हूँ।एचटीएमएल पेज और ब्राउज़र विंडो का आकार सेट करें

var container= document.getElementById("container"); 
container.style.height=(window.innerHeight); 
container.style.width=window.innerWidth;

हालांकि, ब्राउज़र विंडो आकार दर्शनीय आकार और क्षैतिज और ऊर्ध्वाधर स्क्रॉल बार दिखाई देते हैं से बड़ा है। मैं इसे कैसे बना सकता हूं ताकि मेरा HTML पृष्ठ स्क्रॉल बार की आवश्यकता के बिना ब्राउज़र विंडो में फिट हो?

संपादित करें:

मैं मूल रूप से पूछ रहा हूँ, मैं कैसे दस्तावेज़ का आकार व्यूपोर्ट आकार के रूप में ही कर सकते हैं?

स्रोत

2012-03-01 moesef

यह काम करना चाहिए।

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Hello World</title> 
     <style> 
      html, body { 
       width: 100%; 
       height: 100%; 
       margin: 0; 
       padding: 0; 
       background-color: green; 
      } 
      #container { 
       width: inherit; 
       height: inherit; 
       margin: 0; 
       padding: 0; 
       background-color: pink; 
      } 
      h1 { 
       margin: 0; 
       padding: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <h1>Hello World</h1> 
     </div> 
    </body> 
</html>

पृष्ठभूमि रंग वहां हैं ताकि आप देख सकें कि यह कैसे काम करता है। इस कोड को एक फ़ाइल में कॉपी करें और इसे अपने ब्राउज़र में खोलें। सीएसएस के साथ थोड़ा सा खेलने का प्रयास करें और देखें कि क्या होता है।

width: inherit; height: inherit; पैरेंट तत्व से चौड़ाई और ऊंचाई खींचता है। यह डिफ़ॉल्ट होना चाहिए और वास्तव में आवश्यक नहीं है।

h1 { ... } सीएसएस ब्लॉक को हटाने का प्रयास करें और देखें कि क्या होता है। आप लेआउट को एक अजीब तरीके से प्रतिक्रिया दे सकते हैं। ऐसा इसलिए है क्योंकि h1 तत्व इसके कंटेनर के लेआउट को प्रभावित कर रहा है। आप कंटेनर या शरीर पर overflow: hidden; घोषित करके इसे रोक सकते हैं।

मैं यह भी सुझाव दूंगा कि आप CSS Box Model पर कुछ पढ़ लें।

स्रोत

2012-03-01 05:48:32 twaddington

यह "कंटेनर" का एक बच्चा तत्व था जो आपको सुझाव देने जैसा ही था। अच्छा निर्णय। धन्यवाद! – moesef

आप अपने सीएसएस में width: 100%; का उपयोग कर सकते हैं।

स्रोत

2012-03-01 03:59:12 yvoyer

ने कोशिश की। अभी भी व्यूपोर्ट आकार से दस्तावेज़ आकार बड़ा बना रहा है। – moesef

<html> 
<head > 
<title>Welcome</title>  
<style type="text/css"> 
#maincontainer 
{ 
top:0px; 
padding-top:0; 
margin:auto; position:relative; 
width:950px; 
height:100%; 
} 
    </style> 
    </head> 
<body> 
<div id="maincontainer "> 
</div> 
</body> 
</html>

स्रोत

2013-08-13 11:12:40

एचटीएमएल पेज और ब्राउज़र विंडो का आकार सेट करें

उत्तर

संबंधित मुद्दे