ट्विटर बूटस्ट्रैप 3 दो कॉलम पूरी ऊंचाई

Question

मैं ट्विटर बूटस्ट्रैप 3 के साथ दो-स्तंभ पूर्ण-ऊंचाई लेआउट बनाने की कोशिश कर रहा हूं । ऐसा लगता है कि ट्विटर बूटस्ट्रैप 3 पूर्ण ऊंचाई लेआउट का समर्थन नहीं करता है। मुझे क्या करने का मन है:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

यदि सामग्री बढ़ती है, तो नौसेना को भी बढ़ना चाहिए।

• प्रत्येक माता-पिता के लिए ऊँचाई 100% काम नहीं करती है क्योंकि ऐसी स्थिति है जहाँ सामग्री एक पंक्ति में है।
• स्थिति पूर्ण गलत तरीका लगता है
• display: tableऔर display:table-cellसमस्या को हल करें, लेकिन यह सुरुचिपूर्ण ढंग से नहीं है

एचटीएमएल:

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

क्या डिफ़ॉल्ट ट्विटर बूटस्ट्रैप 3 वर्गों के साथ इसे बनाने का कोई तरीका है ?

Comments

क्या नेविगेशन + सामग्री तत्व को शेष व्यूपोर्ट (स्क्रीन) की ऊंचाई को कवर करना है?

— शेखर के। शर्मा

हाँ। बस समाशोधन के लिए: हेडर + सामग्री = व्यूपोर्ट का 100%, यदि सामग्री की ऊंचाई <= व्यूपोर्ट ऊंचाई माइनस हेडर ऊंचाई। गरीब अंग्रेजी के लिए खेद है

— uladzimir

मुझे समझ में नहीं आ रहा है, क्या आप केवल बैकग्राउंड को .row को नहीं दे सकते हैं और कोल-एमडी -9 को हिस्से को कवर करने की अनुमति दे सकते हैं या इसके विपरीत? पंक्ति को 100% ऊँचाई देने के बारे में क्या है कि नव ऊँचाई को 100% दिया जाए और कोलो-md-9 को गतिशील रूप से बढ़ने दिया जाए?

— क्रिस पीटरसन

Answer 1

संपादित करें: में बूटस्ट्रैप 4 , देशी कक्षाओं कर सकते हैं पूर्ण ऊंचाई कॉलम (उत्पादन डेमो ), क्योंकि वे बदल उनकी ग्रिड प्रणाली flexbox करने के लिए। (बूटस्ट्रैप 3 के लिए पढ़ें)

---

देशी बूटस्ट्रैप 3.0 कक्षाएं आपके द्वारा वर्णित लेआउट का समर्थन नहीं करती हैं, हालांकि, हम कुछ कस्टम सीएसएस को एकीकृत कर सकते हैं जो इसे प्राप्त करने के लिए सीएसएस तालिकाओं का उपयोग करते हैं।

बूटली डेमो / कोडपेन

मार्कअप:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(प्रासंगिक) सीएसएस

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

उपरोक्त कोड पूर्ण-ऊंचाई वाले कॉलम (कस्टम सीएसएस-टेबल गुणों के कारण जो हमने जोड़ा है) और 1: 3 (नेविगेशन: सामग्री) के साथ मध्यम स्क्रीन चौड़ाई और इसके बाद के संस्करण के लिए - (बूटस्ट्रैप की डिफ़ॉल्ट कक्षाओं के कारण: col-md) -3 और कोल-एमडी -9)

ध्यान दें:

1) के लिए आदेश में गंदगी बूटस्ट्रैप के मूल स्तंभ कक्षाओं हम की तरह अन्य वर्ग को जोड़ने के लिए नहीं no-floatमार्कअप में और केवल सेट display:table-cellऔर float:noneइस वर्ग पर (के रूप में स्तंभ वर्गों खुद को) के लिए apposed।

2) यदि हम केवल विशिष्ट ब्रेक-पॉइंट के लिए सीएसएस-टेबल कोड का उपयोग करना चाहते हैं (मध्यम स्क्रीन की चौड़ाई और इसके बाद के संस्करण), लेकिन मोबाइल स्क्रीन के लिए हम सामान्य बूटस्ट्रैप व्यवहार में वापस डिफॉल्ट करना चाहते हैं, तो हम अपने कस्टम CSS को एक में लपेट सकते हैं मीडिया क्वेरी, कहें:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

कोडपेन डेमो

अब, छोटी स्क्रीन के लिए, कॉलम डिफ़ॉल्ट बूटस्ट्रैप कॉलम की तरह व्यवहार करेगा (प्रत्येक पूर्ण चौड़ाई प्राप्त कर रहा है)।

3) यदि सभी स्क्रीन चौड़ाई के लिए 1: 3 का अनुपात आवश्यक है - तो संभवतः मार्कअप से बूटस्ट्रैप के कोल-एमडी- * वर्गों को हटाना बेहतर है क्योंकि ऐसा नहीं है कि उनका उपयोग कैसे किया जाए।

कोडपेन डेमो

Comments

हम्म। यह वास्तव में मैं क्या देख रहा हूँ, देशी बूटस्ट्रैप 3 वर्गों के साथ समाधान नहीं हो सकता है? फिर भी धन्यवाद!

— उलदज़िमर

नाव जोड़ने के बाद मेरे लिए काम करता है: कोई नहीं; कॉलम के लिए, लेकिन js पर यह आवश्यक नहीं है। क्यों? अपडेट: @media - कारण

— uladzimir

@Zubzob - मैंने अपना उत्तर अपडेट किया और बूट किया। मूल वर्गों col-md-3 और col-md-9 में एक अतिरिक्त वर्ग जोड़कर - हम यह सुनिश्चित कर सकते हैं कि यह अन्य कोड को गड़बड़ नहीं करेगा।

— डेनियल

तो इसका उत्तर होगा: "नहीं, आप इसे बूटस्ट्रैप कक्षाओं के साथ बॉक्स से बाहर नहीं कर सकते हैं"?

— एरान ओत्ज़ैप

@ मेगलियो ने मेरा संपादित जवाब पढ़ा - इस ओर इशारा करने के लिए धन्यवाद

— डैनिल्ड

Answer 2

आप padding-bottom: 100%; margin-bottom: -100%;ट्रिक के साथ जो चाहें हासिल कर सकते हैं, क्या आप इस फिडल में देख सकते हैं ।

मैं आपका HTML थोड़ा बदल देता हूं, लेकिन आप निम्न कोड के साथ अपने स्वयं के HTML के साथ एक ही परिणाम प्राप्त कर सकते हैं

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

Comments

ठीक। मैं सवाल अपडेट करूंगा। मेरे पास डायनामिक पेज है (कॉल-एमडी -9 बढ़ सकता है), इसलिए, आपका संस्करण काम नहीं करना चाहिए, लेकिन मैं इसका परीक्षण करूंगा। धन्यवाद

— uladzimir

ऐसा कुछ नहीं है, जिसका मैं प्रश्न में अर्थ रखता हूं। मुझे पूर्ण ऊंचाई वाले कॉलम चाहिए, जब कॉल-एमडी -9 में टेक्स्ट की ऊंचाई की एक पंक्ति होती है, तो सभी को 100% - हेडर की ऊंचाई या सरल 100% होना चाहिए। मैंने इस ट्रिक को आजमाया है, केवल 10000px, -10000px जैसे मूल्यों के साथ। लेकिन आपके उत्तर के लिए धन्यवाद।

— uladzimir

मेरे कॉलम ऊँचे थे, इसलिए मुझे पैडिंग-बॉटम में संशोधन करना पड़ा: 10000%; मार्जिन-तल: -10000%; और इसने चाल चली। अन्यथा मुझे लगता है कि 100% ने पृष्ठ की ऊंचाई के साथ क्या किया है

— टूलकिट

इस समाधान की कोशिश कर रहे अन्य लोगों के लिए, अतिप्रवाह: छिपी हुई ज़रूरतों को मूल पंक्ति में लागू किया जाना चाहिए, न कि साइड-साइड कॉलम को ब्राउज़रों में काम करने के लिए। यह फिडेल में सही है, लेकिन ऊपर स्पष्टीकरण में नहीं।

— टिम

Answer 3

शुद्ध सीएसएस समाधान

वर्किंग फिडल

केवल CSS2.1 का उपयोग करके, सभी ब्राउज़र (IE8 +) के साथ कार्य करें, बिना किसी ऊंचाई या चौड़ाई को निर्दिष्ट किए।

इसका मतलब यह है कि यदि आपका हेडर अचानक लंबा हो जाता है, या आपके बाएं नेविगेशन को विस्तार करने की आवश्यकता है, तो आपको अपने सीएसएस में कुछ भी ठीक करने की आवश्यकता नहीं है ।

पूरी तरह उत्तरदायी, सरल और स्पष्ट और प्रबंधन करने में बहुत आसान है।

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

स्पष्टीकरण: कंटेनर divशरीर की 100% ऊंचाई लेता है, और वह 2 खंडों में विभाजित है। शीर्ष लेख अनुभाग इसकी आवश्यक ऊंचाई तक HeightTakerजाएगा , और बाकी को ले जाएगा। इसे कैसे प्राप्त किया जाता है? एक खाली तत्व को 100% ऊँचाई (उपयोग करने :before) के साथ कंटेनर को तैरते हुए , और HeightTakerस्पष्ट नियम (उपयोग करके :after) के अंत में एक खाली तत्व दे । वह तत्व फ्लोट किए गए तत्व के साथ एक ही पंक्ति में नहीं हो सकता है, इसलिए उसे अंत तक धकेल दिया जाता है। जो दस्तावेज़ का 100% हिस्सा है।

इसके साथ हम HeightTakerकिसी भी विशिष्ट ऊंचाई / मार्जिन को बताए बिना, बाकी कंटेनर की ऊंचाई को फैला देते हैं ।

अंदर HeightTakerहम एक मामूली परिवर्तन के साथ एक सामान्य फ्लोटेड लेआउट (प्रदर्शन की तरह कॉलम को प्राप्त करने के लिए) का निर्माण करते हैं .. हमारे पास एक Wrapperतत्व है, जिसे 100%काम करने के लिए ऊंचाई की आवश्यकता होती है ।

अपडेट करें

यहाँ बूटस्ट्रैप कक्षाओं के साथ डेमो है। (मैंने आपके लेआउट में केवल एक div जोड़ा)

Comments

हाँ, यह सबसे सौंदर्य समाधान है। क्या आप इसे बूटस्ट्रैप कक्षाओं के लिए बना सकते हैं?

— uladzimir

और कृपया, समझाएं, यह कैसे काम करता है। वर्तमान में यह स्वीकृत करने के लिए सबसे उपयुक्त है

— uladzimir

मैं बूटस्ट्रैप नहीं जानता .. क्षमा करें। लेकिन इसका उपयोग करने के लिए इतना आसान है .. आप इसे अपने आप से कर सकते हैं। मैं एक विवरण जोड़ूंगा कि यह कैसे काम करता है।

— अवरामहकुल

@baxxabit मैंने एक स्पष्टीकरण जोड़ा। अगर आपको और जानकारी चाहिए तो मुझे बताएं

— अवरामहकुल

यदि आप विंडो को आकार देते हैं तो यह स्क्रीन पर ठीक से फिट नहीं होगी।

— साडेघ

Answer 4

मैंने एक सूक्ष्म परिवर्तन के बारे में सोचा, जो डिफ़ॉल्ट बूटस्ट्रैप व्यवहार को नहीं बदलता है। और मैं इसका उपयोग केवल तभी कर सकता हूं जब मुझे इसकी आवश्यकता हो:

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

तो मैं इसे इस तरह उपयोग कर सकते हैं:

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

Comments

मेरे लिए खूबसूरती से काम किया (बूटस्ट्रैप 3 का उपयोग करके)

— गैरी रिक्टर

मैं काम करने के लिए उपरोक्त समाधानों में से एक नहीं प्राप्त कर सका, ऊर्ध्वाधर-संरेखण मेरे लिए महत्वपूर्ण था।

— नाथन

Answer 5

मेरे ज्ञान के लिए आप इसे पूरा करने के लिए 5 तरीकों का उपयोग कर सकते हैं:

1. CSS प्रदर्शन तालिका / टेबल-सेल गुणों का उपयोग करना या वास्तविक तालिकाओं का उपयोग करना।
2. आवरण के अंदर एक निरपेक्ष तैनात तत्व का उपयोग करना।
3. Flexbox प्रदर्शन संपत्ति का उपयोग करना, लेकिन आज के रूप में, यह अभी भी आंशिक समर्थन है
4. अशुद्ध कॉलम तकनीक का उपयोग करके पूर्ण स्तंभ ऊंचाइयों को अनुकरण करें ।
5. पैडिंग / मार्जिन तकनीक का उपयोग करना। उदाहरण देखें ।

बूटस्ट्रैप: मुझे इसके साथ बहुत अनुभव नहीं है, लेकिन मुझे नहीं लगता कि वे इसके लिए शैली प्रदान करते हैं।

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

Comments

धन्यवाद, @Oriol आप कमाल के है। कुछ बिंदु: 1), 2) हां, लेकिन मैं जो चाहता हूं 3) यह एक समाधान है, लेकिन केवल आधुनिक एफएफ और क्रोम के लिए। सफारी फ्लेक्सबॉक्स 4 के पुराने संस्करण का समर्थन करती है) बूटस्ट्रैप कक्षाओं का नहीं 5) सही कॉलम बढ़ सकता है। इसलिए अतिप्रवाह: छिपी हुई फसल एक महत्वपूर्ण रेखा होगी। यह शांत नहीं है :) मैं आपके कोड की कोशिश

— करूंगा

Answer 6

आधुनिक और बहुत सरल समाधान:

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

सीएसएस:

.row{
    display: flex;
}

Answer 7

शुद्ध सीएसएस समाधान काफी आसान है और यह एक चार्म क्रॉस ब्राउज़र की तरह काम करता है।

आप बस एक बड़े पैडिंग और एक समान रूप से बड़े नकारात्मक मार्जिन को नौसेना और सामग्री कॉलम में जोड़ते हैं, फिर उनकी पंक्ति को अतिप्रवाह में छिपे हुए एक वर्ग में लपेटते हैं।
लाइव दृश्य
संपादित करें दृश्य

एचटीएमएल

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

सीएसएस

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}  

सौभाग्य!

Comments

क्षमा करें, लेकिन यह एक भयानक हैक की तरह दिखता है जो आपको बाल कंटेनर के नीचे एक तत्व की पूर्ण स्थिति के लिए विकल्प नहीं देता है।

— Mattijs

अच्छा समाधान नहीं है यदि आपके पास नीचे की पृष्ठभूमि में त्रिज्या या किसी प्रकार की दृश्य संपत्ति है।

— रैंडमबॉय

Answer 8

समाधान दो तरीकों से प्राप्त किया जा सकता है

1. डिस्प्ले का उपयोग करना: टेबल और डिस्प्ले: टेबल-सेल
2. पैडिंग और नकारात्मक मार्जिन का उपयोग करना।

उपरोक्त समाधान प्राप्त करने के लिए जिन वर्गों का उपयोग किया जाता है, वे बूटस्ट्रैप 3 में नहीं दिए गए हैं। डिस्प्ले: टेबल और डिस्प्ले: टेबल-सेल दिए गए हैं, लेकिन केवल HTML में तालिकाओं का उपयोग करते समय। निगेटिव मार्जिन और पेडिंग क्लासेस भी नहीं हैं।

इसलिए हमें इसे प्राप्त करने के लिए कस्टम सीएसएस का उपयोग करना होगा।

नीचे पहला समाधान है

HTML कोड:

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

इसी सीएसएस:

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

नीचे दूसरा समाधान है

HTML कोड:

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

इसी सीएसएस:

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

Comments

कॉलम में व्यूपोर्ट की 100% ऊंचाई नहीं है

— uladzimir

माफ करना एक मूल शैली html, बॉडी, कंटेनर {ऊँचाई: 100%;} इस शैली को पहले समाधान में जोड़ें

— user2594152

दायां स्तंभ बढ़ सकता है, इसलिए अतिप्रवाह: पंक्ति के लिए छिपा हुआ कुछ सामग्री को क्रॉप कर सकता है, अगर यह व्यूपोर्ट की ऊंचाई से अधिक ले जाएगा।

— uladzimir

ओवरफ्लो निकालें: पंक्ति से छिपा हुआ। वहाँ सामग्री छिपा है jsfiddle.net/gMPXG/7/embedded/result

— uladzimir

इसमें क्या दिक्कत है ??

— user2594152 12

Answer 9

ठीक है, मैंने बूटस्ट्रैप 3.0 का उपयोग करके एक ही चीज हासिल की है

नवीनतम बूटस्ट्रैप के साथ उदाहरण

http://jsfiddle.net/HDNQS/1/

HTML:

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

SCSS:

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

Comments

हां, लेकिन यह स्वीकृत उत्तर के समान है। धन्यवाद

— uladzimir

हां, यह ज्यादातर समान है लेकिन आपको कुछ छोटे "ट्विकिंग्स" (देखें content:noneऔर अन्य छोटी चीजें) जोड़ने की आवश्यकता है । मैं एक 'ड्रॉप-इन' प्रतिस्थापन पोस्ट करना चाहता था जिसे मैं

— अस्वस्थ

"वर्टिकल-अलाइन: टॉप" के अलावा के लिए +1। जब तक मैंने इसे नहीं जोड़ा, तब तक मेरा बायाँ हाथ स्तंभ पृष्ठ के निचले भाग पर अटका हुआ था।

— नोज़वेव्स

Answer 10

तो ऐसा लगता है कि आपका सबसे अच्छा विकल्प padding-bottomनकारात्मक margin-bottomरणनीति द्वारा मुकाबला किया जा रहा है ।

मैंने दो उदाहरण दिए। एक <header> अंदर से .container , और दूसरा बाहर ।

दोनों संस्करणों को ठीक से काम करना चाहिए। निम्नलिखित @mediaक्वेरी के उपयोग पर ध्यान दें ताकि यह छोटे स्क्रीन पर अतिरिक्त पैडिंग को हटा दे ...

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

इसके अलावा, उन उदाहरणों से आपकी समस्या ठीक होनी चाहिए।

Comments

छोटे स्क्रीन जियो पर अतिरिक्त पैडिंग को हटाने के लिए अच्छी कॉल

— डेविड मैन

बाहर के हेडर के साथ फिडेल के लिए अंगूठे, यह मेरे मामले के लिए काम करने वाला एकमात्र था।

— टीनस टेट

Answer 11

ऐसा करने का एक बहुत ही आसान तरीका है अगर आप सभी रंग के बारे में चिंतित हैं।

इसे अपने बॉडी टैग में पहले या आखिरी में डालें

<div id="nfc" class="col col-md-2"></div>

और यह आपकी सीएसएस में है

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

आप केवल एक आकृति बना रहे हैं, इसे पृष्ठ के पीछे पिनिंग करें और इसे पूरी ऊंचाई तक बढ़ाएं। मौजूदा बूटस्ट्रैप कक्षाओं का उपयोग करके, आपको सही चौड़ाई मिलेगी और यह उत्तरदायी रहेगा।

इस पद्धति के साथ कुछ सीमाएँ हैं, लेकिन अगर यह पृष्ठ की मूल संरचना के लिए है, तो यह सबसे अच्छा उत्तर है।

Comments

क्यों आप की क्या ज़रूरत है position: absoluteतो, position: fixed?

— ADTC

फोग्गेस्ट नहीं है, टाइपो :)

— साइमन स्टीवंस

अच्छा समाधान है। हालाँकि, मैं इसे केवल सही तरीके से उपयोग करने के लिए प्राप्त कर सकता हूं .container-fluid। मैं उपयोग करना चाहूंगा .container। विचार?

— जिब्रान

.containerया .container-fluidइसकी कोई प्रासंगिकता नहीं है। .col.col-md-2सेट चौड़ाई बूटस्ट्रैप का उपयोग कर। मेरा सीएसएस ऊपर दीव को पूरी ऊंचाई तक ले जाता है, यह सुनिश्चित करने के लिए पर्याप्त नकारात्मक z- इंडेक्स के साथ कि यह सब कुछ पीछे है। जैसा कि ऊपर कहा गया है, यह आपके <body>टैग में बहुत पहले या अंतिम तत्व होना चाहिए

— साइमन स्टीवंस

Answer 12

मैंने पूरी चौड़ाई और ऊंचाई तालिका बनाने के लिए बूटस्ट्रैप के साथ एक साधारण सीएसएस संगत लिखा:

फिडल: https://jsfiddle.net/uasbfc5e/4/

सिद्धांत है:

• एक मुख्य DIV पर "मेज़पोश" जोड़ें
• फिर संक्षेप में, नीचे दिए गए DIV पंक्तियों को बनाएंगे
• और फिर पंक्तियों के नीचे DIV कोशिकाएं होंगी
• आप हेडर या समान के लिए वर्ग "टेबलहेडर" का उपयोग कर सकते हैं

HTML:

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

सीएसएस:

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

Comments

CSS minifiers से सावधान रहें, कभी-कभी वे बदल 0%;जाते हैं 0;जो पूरी तरह से अलग है। यदि ऐसा होता है, तो आप 1%;इसके बजाय उपयोग कर सकते हैं ।

— गिलियूम एफ।

Answer 13

प्रयत्न

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

.fill वर्ग के लिए सीएसएस नीचे है

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

अपने संदर्भ के लिए बस बेला में देखें।

Comments

आपके उत्तर के लिए धन्यवाद, लेकिन मैं ट्विटर बूटस्ट्रैप 3 का उपयोग करता हूं, 2 नहीं। कृपया, पढ़ें getbootstrap.com/getting-started/#m माइग्रेशन

— uladzimir

बूटस्ट्रैप 3, कोई स्पैन का उपयोग नहीं किया जाता है, इसे कोल में बदल दिया जाता है।

— कूकी 3

ठीक। स्तंभों की ऊँचाई स्तंभों में सामग्री की ऊँचाई के बराबर होगी, लेकिन मेरे पास केवल एक पंक्ति हो सकती है।

— uladzimir

धन्यवाद @ कूकी ३। बस बदलने के spanलिए col-md-और देखते हैं कि क्या होता है<div class="container"> <div class="row"> <div class="col-md-12">header section</div> </div> <div class="row"> <div class="col-md-4">Navigation</div> <div class="col-md-8">Content</div> </div> </div>

— कृष्णा रानी साहू

काम नहीं करता है। क्या आप मेरी टिप्पणी पढ़ते हैं? jsfiddle.net/YQUQd/1/embedded/result

— uladzimir

Answer 14

इसे इस्तेमाल करे

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

यात्रा http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

सैयद को धन्यवाद

Comments

धन्यवाद, क्या आप बूटस्ट्रैप 3.0 के लिए अपना उदाहरण बदल सकते हैं?

— उलजिमीर

Answer 15

यदि पंक्ति के बाद कोई सामग्री नहीं होगी (पूरी स्क्रीन की ऊँचाई ली गई है), तो तत्व के position: fixed; height: 100%लिए उपयोग की जाने वाली चाल .col:beforeअच्छी तरह से काम कर सकती है:

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

Answer 16

यहां ऑफसेटिंग के साथ इसका उल्लेख नहीं किया गया था।

आप बाईं साइडबार के लिए पूर्ण स्थिति का उपयोग कर सकते हैं।

सीएसएस

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

एचटीएमएल

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

Answer 17

इसे इस्तेमाल करे

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

यह बूटस्ट्रैप 3 का उपयोग करता है ताकि अतिरिक्त CSS आदि की आवश्यकता न हो ...

Comments

कृपया,

— फिड

यहाँ बूटस्ट्रैप वेबसाइट से कुछ इस तरह का एक नमूना दिखाया गया है: getbootstrap.com/examples/offcanvas

— Dan Esparza

Answer 18

क्या आपने बूटस्ट्रैप का एफिक्स देखा है जावास्क्रिप्ट के खंड में ???

मुझे लगता है कि यह सबसे अच्छा और आसान समाधान दोस्त होगा।

वहां देखें: http://getbootstrap.com/javascript/#affix

Comments

क्या आप कृपया उदाहरण साझा कर सकते हैं, मैं एफिक्स के साथ दो कॉलम कैसे बना सकता हूं?

— uladzimir

वैसे .... क्या आपने मीन-ऊंचाई के साथ कोशिश की ??? हो सकता है कि यह उपयोगी हो, ठीक है? @Baxxabit

— Despertaweb

Answer 19

यहां दिए गए कोड के साथ प्रयोग करने के बाद: बूटस्ट्रैप ट्यूटोरियल

यहां नवीनतम बूटस्ट्रैप का उपयोग करके एक और विकल्प है v3.0.2 दिया गया है:

मार्कअप:

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

अतिरिक्त सीएसएस:

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

नमूना JSFiddle

आशा है कि यह किसी को भी मदद करता है।

Comments

jsfiddle.net/zHRZr/7 गतिशील ऊंचाई के बारे में मूल प्रश्न, लेकिन फिर भी धन्यवाद

— uladzimir