div span लंबवत सभी उपलब्ध ऊंचाई

enter image description here लाल और हरे रंग के divs दूसरे के आगे एक गठबंधन कर रहे हैं। हरे रंग के div के रूप में लाल div एक ही ऊंचाई कैसे बना सकते हैं?div span लंबवत सभी उपलब्ध ऊंचाई

स्रोत

2012-01-05 Ryan

क्या आप अपना वर्तमान HTML/CSS जोड़ सकते हैं? ए [जेएसफ़िल्ड डेमो] (http://jsfiddle.net/) भी उपयोगी होगा। – thirtydot

क्या आपको आईई 7 का समर्थन करने की आवश्यकता है? – thirtydot

है आप एक div कि दोनों तत्व शामिल हैं और clearfixed

<div class="wrapper clearfix"> 
    <div class="red"></div> 
    <div class="green"></div> 
</div>

है होना चाहिए

फिर आप आवरण सापेक्ष स्थिति जोड़ें:

.green { 
    float: right; 
    width: 50%; 
}

.wrapper { 
    /* remember this is clearfixed */ 
    position: relative; 
}

आप सही करने के लिए हरी कंटेनर नाव जाने

तो फिर तुम लाल निरपेक्ष स्थिति और यह जानते हैं कि यह आवरण के सभी स्थान का उपयोग करना चाहिए:

.red { 
    position: absolute; 
    left: 0; 
    width: 50%; 
    top: 0; 
    bottom: 0; 
}

ध्यान दें कि इस मामले केवल काम करेंगे जब हरी कंटेनर छोड़ दिया एक से बड़ा है।

स्रोत

2012-01-05 09:35:20 Duopixel

यह समस्याग्रस्त है - क्योंकि ऊंचाई समान बनाने के लिए, आपको दस्तावेज़ और लाल और हरे रंग के div के बीच div जोड़ने की आवश्यकता है, इस div की ऊंचाई परिभाषित होनी चाहिए, ताकि आप दोनों div के अंदर ऊंचाई को 100% उदाहरण के लिए सेट कर सकें।

<div style="height: [must be defined]"> 
    <div id="red" style="height: 100%; ..."> ... </div> 
    <div id="green" style="height: 100%; ..."> ... </div> 
</div> 
<div id="black" style="height: 100%; ..."> ... </div>

लेकिन - यह टूट जाएगा, जब divs में से एक अन्य की तुलना में अधिक हो जाएगा - यह अतिप्रवाह

पी एस का उपयोग करके ठीक। कुछ मामलों के लिए इसे यहाँ तालिकाओं का उपयोग करने के लिए अच्छा है, क्योंकि तालिका सेल हमेशा एक ही ऊंचाई

स्रोत

2012-01-05 09:33:37 SergeS

आप एक टेबल को रैपर के रूप में उपयोग कर सकते हैं। पहला और अंतिम टी वैकल्पिक हैं। लेकिन अगर आपको पहले या आखिरी टी की जरूरत है तो ऊंचाई निर्धारित करें। मध्य टी के लिए सही ऊंचाई की गणना करने के लिए ब्राउज़र को इसकी आवश्यकता है।

<!DOCTYPE HTML> 
<html> 
<head> 
    <title></title> 
</head> 
<style type="text/css"> 
    html, body {height:100%; padding:0; margin:0;} 
    #wrapper {height:100%;width:100%;border-collapse:collapse;} 
    #wrapper td {vertical-align:top;} 
    #wrapperFirst, #wrapperLast {height:1px;} 
</style> 
<body> 
    <table id="wrapper"> 
     <tr><td id="wrapperFirst" style="background-color: #ff44ff;">foo top</td></tr> 
     <tr><td style="background-color: #ffff44;">text</td></tr> 
     <tr><td id="wrapperLast" style="background-color: #44ffff;">foo bottom</td></tr> 
    </table> 

</body> 
</html>

स्रोत

2013-06-12 08:41:55 Uwe

div span लंबवत सभी उपलब्ध ऊंचाई

उत्तर

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