ट्विटर बूटस्ट्रैप - 100% ऊंचाई

Question

मैं ट्विटर-बूटस्ट्रैप ढांचे का उपयोग कर अपने एप्लिकेशन के लिए एक व्यवस्थापक पैनल डिज़ाइन करने की कोशिश कर रहा हूं लेकिन मुझे अपना लेआउट काम करने के लिए नहीं मिल रहा है।

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

एचटीएमएल

<div class="container-fluid"> 
<div class="row-fluid"> 


    <div class="span2 colorize-white"> 
    <!--Sidebar content-->Sidebar 
    </div> 


    <div class="span10 colorize-white"> 
    <!--Body content-->Main 
    </div> 


</div> 
</div> 

सीएसएस

/* Global */ 
html, body { 
    color: #6B787F; 
    padding: 0; 
    height: 100%; 
    background: #11161a; 
    font-family: 'PT Sans' !important; 
} 

.colorize-white { 
    background: #FFFFFF; 
} 

.no-margin { 
    margin: 0; 
} 

मैं वहाँ आधे रास्ते हूँ लेकिन वहाँ दो चीजें हैं मैं नहीं कर सकता का समाधान।
1) 100% ऊंचाई
2) दूसरी छवि पर बाहरी मार्जिन से छुटकारा

आप देख सकते हैं कि मैं ब्राउज़र सीमा और साइडबार/मुख्य तत्वों और उसके बाद दोनों के बीच मार्जिन के बीच मार्जिन है। अगर मैं एचटीएमएल में अपने सभी तत्वों में कोई मार्जिन नहीं जोड़ता हूं तो मुझे इससे छुटकारा पाना होगा, जिसमें मैंने बॉडी टैग समेत चिपकाया है, मुझे अभी भी 100% ऊंचाई नहीं मिल रही है और मैं अभी भी ब्राउज़र सीमा और साइडबार और मुख्य सामग्री के बीच मार्जिन से छुटकारा नहीं पा रहा हूं साइडबार और मुख्य सामग्री के बीच मार्जिन स्थान गायब हो जाता है।

Answer 1

मुझे यकीन नहीं है कि बूटस्ट्रैप का ग्रिड मॉडल वह है जो आप यहां देख रहे हैं। आप इसके बजाय पूर्ण स्थिति की तलाश कर सकते हैं। उदाहरण के लिए:

#sidebar, #content { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 
#sidebar { left: 0; width: 10em; } 
#content { left: 10em; right: 0; } 

Try it out.

Answer 2

मुझे यकीन है कि अगर यह है आप के लिए, but here it goes.

बस थोड़ा सा सीएसएस संशोधित क्या देख रहे नहीं हूँ। margin:0; से html, body टैग।

Answer 3

यहाँ एक उदाहरण है कि बूटस्ट्रैप 3 के लिए काम करता है ..

सुनिश्चित करें कि HTML और शरीर दोनों 100% ऊंचाई रहे हैं है। साइडबार पर सामग्री लपेटें और फिर साइडबार पर position:absolute का उपयोग करें।

http://www.bootstrapzero.com/bootstrap-template/basis

कोड: http://bootply.com/86704