1. घर
  2. सवाल और जवाब
  3. ट्विटर बूटस्ट्रैप का उपयोग कर 100% ऊंचाई का उपभोग करने वाले एकाधिक कॉलम कैसे हैं?

ट्विटर बूटस्ट्रैप का उपयोग कर 100% ऊंचाई का उपभोग करने वाले एकाधिक कॉलम कैसे हैं?

2012-04-20 11 views
9

मैंने कई समान प्रश्न देखे हैं, लेकिन मुझे जो कुछ भी तलाश रहा है उसका उत्तर नहीं मिला है।ट्विटर बूटस्ट्रैप का उपयोग कर 100% ऊंचाई का उपभोग करने वाले एकाधिक कॉलम कैसे हैं?

  • मैं चहचहाना बूटस्ट्रैप का उपयोग कर रहा है, इसलिए मैं एक समाधान है कि यह
  • के साथ संगत है लेआउट like this दिखेगा चाहते हैं: आगे की जानकारी इस प्रकार है। क्षमा करें मैं छवि को एम्बेड नहीं कर सकता क्योंकि मुझे पहले 10 अंक चाहिए।
  • This जितना करीब है उतना करीब है। समस्या यह है कि मैं पाद लेख पर रोकने के लिए साइडबार नहीं प्राप्त कर सकता।
  • मुझे साइडबार के समान विस्तार करने के लिए मुख्य सामग्री की आवश्यकता होगी।
  • साइडबार और मुख्य सामग्री दो अलग-अलग रंग हैं और आकार में भिन्न हैं। वे दोनों पाद लेख का विस्तार करना होगा
  • सूचना है कि न्यूनतम ऊंचाई
  • पाद लेख बढ़ना चाहिए होना चाहिए 100% अगर सामग्री बहुत ज्यादा बढ़ता है (यानी यह स्क्रॉल की आवश्यकता होगी यह देखने के लिए)
  • मैं करने के लिए कोई करना चाहते हैं जावास्क्रिप्ट का उपयोग करें, लेकिन यदि यह आवश्यक है तो मुझे इतनी देर तक समाधान नहीं लगेगा क्योंकि यह जेएस (मैं भी jQuery का उपयोग कर रहा हूं) के साथ प्रगतिशील रूप से बढ़ाया गया है।
  • पेज की सामग्री एक निश्चित चौड़ाई

स्रोत

2012-04-20 John Kholler

उत्तर

15

मुझे लगता है कि यह हो सकता है, आप क्या देख रहे हैं: two column layoutsource।

मुख्य विचार <body> और <html> दोनों पर height: 100% सेट और फिर लगता है कि कंटेनर भी सभी ऊंचाई (min-height: 100% के माध्यम से) ले जाता है बनाने के लिए है। आप देख सकते हैं कि कोड में आईई 6 के लिए वर्कअराउंड भी शामिल है, क्योंकि इसे मूल रूप से लिखा गया था, जब आईई 6 से लड़ना काम का एक और दिन था।

यह थोड़ा और जटिल और अधिक बार holy grail layoutsource का उपयोग करके किया गया था।

स्रोत

2012-04-20 04:59:56

+0

धन्यवाद यह वही है जो मैं ढूंढ रहा था। जब तक मेरे पास 15 प्रतिष्ठा नहीं है तब तक मैं अप-वोट नहीं कर सकता लेकिन मैंने संकेत दिया है कि यह सही जवाब था। –

+9

यह "ट्विटर बूटस्ट्रैप का उपयोग करके" प्रश्न का उत्तर कैसे देता है? – DGM

+0

इसका कोई प्रभाव क्यों नहीं होगा? –

2

सीएसएस के माध्यम से यह संभव हो सकता है, लेकिन कुछ चाल आवश्यकता हो सकती है के साथ क्षैतिज रूप से केंद्रित है।

आपको पैडिंग-तल जोड़कर दोनों divs/कॉलम को बहुत लंबा बनाना होगा: 1000px और फिर "ब्राउजर को ट्रिक करें" सोचने में वे मार्जिन-तल का उपयोग करके लंबा नहीं हैं: -1000px। यह नीचे उदाहरण के माध्यम से बेहतर समझाया गया है।

http://jsfiddle.net/mediasoftpro/Ee7RS/

आशा यह ठीक हो जाएगा।

स्रोत

2012-04-20 03:12:24 irfanmcsd

+0

उदाहरण के लिए धन्यवाद। मैंने कुछ उदाहरण देखे हैं जो जावास्क्रिप्ट का उपयोग करते हैं, लेकिन दृढ़ता से इसकी आवश्यकता नहीं है; परवाह किए बिना, उदाहरण की बहुत सराहना की है। क्या आप जानते हैं कि जावास्क्रिप्ट का उपयोग किये बिना मेरी आवश्यकताएं संभव हैं? –

+0

ठीक है मैंने उदाहरण अपडेट किया और इसे सीएसएस के माध्यम से किया। – irfanmcsd

0

अरे मुझे लगता है कि आप इस

Css चाहते

**

.wraper, .header, .footer{ 
width:80%; 
    margin:0 auto; 
    overflow:hidden; 
    border:solid 2px red; 
} 
.header{ 
    height:100px; 
    background:green; 
    border-color:darkred; 
} 
.sidebar{ 
width:20%; 
    background:yellow; 
    float:left; 
} 
.content{ 
width:70%; 
    background:pink; 
    float:right; 
} 
.footer{ 
    height:100px; 
    background:blue; 
    border-color:black; 
} 
#container2 { 
background: none repeat scroll 0 0 #FFA7A7; 
clear: left; 
float: left; 
overflow: hidden; 
width: 100%; 
} 
#container1 { 
background: none repeat scroll 0 0 #FFF689; 
float: left; 
position: relative; 
right: 75%; 
width: 100%; 
} 
#sidebar { 
float: left; 
left:76%; 
overflow: hidden; 
position: relative; 
width: 20%; 
text-align: justify; 
} 
#content { 
    float: left; 
    left: 81%; 
    overflow: hidden; 
    position: relative; 
    text-align: justify; 
    width: 72%; 
}

** एचटीएमएल

<div class="header">header bar </div> 
    <div class="wraper"> 
     <div id="container2"> 
    <div id="container1"> 
     <div id="sidebar"> 
      This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text 
     </div> 
     <div id="content"> 
      This is dummy text here This is dummy text here This is dummy 
     </div> 
    </div> 
</div> 
    </div> 
     <div class="footer">Footer bar</div>

लाइव डेमो +०१२३३२७७८० इस click herehttp://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

स्रोत

2012-04-20 05:07:59

1

के बारे में

अधिक आप प्रदर्शन के साथ की कोशिश कर सकते हैं: तालिका; से अभिभावक div और डिस्प्ले: टेबल-सेल;

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    .container { 
    background:red; 
    width:600px; 
    display:table; 
    } 

    .left { 
    background:yellow; 
    width:200px; 
    display:table-cell; 

    } 


    .mid { 
    background:blue; 
    width:400px; 
    display:table-cell; 


    } 

     .right { 
    background:green; 
    width:200px; 
    display:table-cell; 

    } 



</style> 
</head> 
<body> 
    <div class="container"> 
    <div class="left">shailender</div> 
     <div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
     fff</div> 
     <div class="right">afdafaf</div> 


    </div> 
</body> 
</html>

डेमो: - -: अपने परिणामों को प्राप्त करने के लिए बाल डिव .... को

कोड देखhttp://jsbin.com/ebucoz/13/edit

Read More About Fluid Width Equal Height Columns with Examples

स्रोत

2012-04-20 07:06:34

+0

बूटस्ट्रैप का उपयोग कहां है? (और 'फ्लोट' विशेषता) – Georgio

0

केवल वास्तविक उत्तर:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 


<table border="1" height="100%" width="100%"> 
    <tr> 
     <td width="10%"> 
      left 
     </td> 
     <td> 
      right 
     </td> 
    </tr> 
</table>

स्रोत

2014-08-13 15:30:28 sproketboy

+0

+1 क्या मुझे हंसना चाहिए, या रोना चाहिए? – bishop

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

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