2011-06-06 7 views
6

मेरे पास 2 डीआईवीएस के साथ एक बहुत ही सरल लेआउट है: एक निश्चित चौड़ाई बाएं बार और एक सही क्षेत्र जो शेष चौड़ाई का 100% लेना चाहिए। दोनों 100% ऊंचाई हैं, और यदि ऊंचाई खिड़की की ऊंचाई से ऊंची है तो मैं सही आइटम को लंबवत स्क्रॉल बार रखना चाहता हूं।पृष्ठ के दाहिने छोर से "100%" स्क्रॉल की डीआईवी चौड़ाई

मेरा वर्तमान कोड संपूर्ण ब्राउज़र विंडो लेता है, लेकिन सही क्षेत्र ब्राउज़र दृश्यमान क्षेत्र से दाईं ओर स्क्रॉल करता है, और कभी भी लंबवत स्क्रॉल बार दिखाई नहीं देता है।

HTML:

<body> 
    <form id="Form2" runat="server"> 
     <div class="page"> 
      <div class="clear hideSkiplink"> 
       Left side stuff goes here.... 
      </div> 
      <div class="main"> 
       Right size stuff goes here.... 
      </div> 
     </div> 
    </form> 
</body> 

सीएसएस:

div.hideSkiplink 
{ 
    padding:20px; 
    background-color:#990000; 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:249px; 
    height:100%; 
} 
div.main 
{ 
    padding: 10px; 
    margin: 0px; 
    background-color: #000000; 
    color: #ffffff; 
    position: fixed; 
    top: 0px; 
    left: 250px; 
    width: 100%; 
    height: 100%; 
} 
+0

मैं इसे अधिकतर काम कर रहा हूं, आपकी टिप्पणियों के लिए धन्यवाद! मुझे अभी भी इच्छा है कि मुझे जाने के लिए मुझे एक डीवी जेन मास्टर तक पहुंच हो ... व्यवहार कभी-कभी अजीब हो सकता है! – pearcewg

उत्तर

6

इसका मतलब है कि जब आप कुछ width:100% दे 'जो कुछ भी मेरे कंटेनर की चौड़ाई, मैं एक ही चौड़ाई होगा' - यह मतलब नहीं है 'मैं उपलब्ध स्थान का 100% लेगा'

दूसरे शब्दों में, मान लीजिए कि आपका मूल डीआईवी 300 पिक्सल चौड़ा था - अगर आप बच्चे div width: 100% देते हैं , यह 300 पिक्सल का 100% होगा।

आप यहां क्या कर सकते हैं, क्योंकि आपका बायां कॉलम निश्चित चौड़ाई है, दाएं div में बाएं मार्जिन जोड़ना है।

div.left 
{ 
    width: 249px; 
} 

div.right 
{ 
    width: 100%; 
    margin-left: 249px; 
} 
+4

यह भी ध्यान देने योग्य है कि चौड़ाई सामग्री चौड़ाई का मतलब है। यह उसके साथ शुरू होता है और फिर इसमें पैडिंग, सीमा और मार्जिन जोड़ता है। तो यदि आपके पास किसी पृष्ठ पर 100% के साथ एक एकल div है, तो भी कोई पैडिंग होने पर यह स्क्रीन को स्क्रॉल कर देगा। – gtd

+0

@gtd 100% सही है। हालांकि, आप सीएसएस के 'बॉक्स-आकार का उपयोग करके उस पर काम कर सकते हैं: सीमा-बॉक्स;' नियम। हालांकि, [समर्थन पूर्ण नहीं है, अभी तक] (http://caniuse.com/#search=box-sizing) – KOGI

0

इसके बजाय व्यापक क्षेत्र अंतरिक्ष को भरने के होने का, क्यों नहीं बस बाईं बार पूरी तरह से तैनात है और मुख्य सामग्री <div> पूरे पृष्ठ को भरने, एक padding-left के साथ सामग्री के साथ बदल कर?

0

100% चौड़ाई वाला एक div उस कंटेनर को भर देगा जो आपके अंदर है। आपका कंटेनर पृष्ठ की चौड़ाई 100% है। यह इस तथ्य को ध्यान में नहीं रखता है कि आपने इसे पूर्ण स्थिति के साथ 250px दाएं स्थानांतरित कर दिया है।

आपका सर्वश्रेष्ठ दांव:

.hideskiplink प्रवाह में मुख्य के बाद आना चाहिए। बाएं। Hideskiplink बाईं ओर, इसे चौड़ाई दें, और उसके बाद। Mains margin-left। Hideskiplink की चौड़ाई से मेल खाता है।

1

कभी-कभी आप 0.

ईजी लिए सीएसएस में शरीर में मार्जिन सेट करना होगा।

body {background-color:#000; margin-left:0px;} 

डिफ़ॉल्ट रूप से कुछ ब्राउज़रों के बाईं ओर पिक्सेल पैडिंग के कुछ जोड़े होते हैं।

0

मैंने उस बिंदु के भीतर मेरी सामग्री की चौड़ाई के समान ही मूल्य को 'बॉडी' तक न्यूनतम चौड़ाई निर्धारित करके इस मुद्दे को ठीक कर दिया है।

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