सीएसएस: ऊंचाई को गतिशील रूप से समायोजित करने के लिए बाएं फ्लोट div कैसे बनाएं?

मैं गतिशील सामग्री के साथ दाएं फ्लोट किए गए div की एक ही ऊंचाई पर स्वचालित रूप से अपनी ऊंचाई समायोजित करने के लिए एक स्थिर सामग्री के साथ अपना फ़्लोट बाएं div कैसे बना सकता हूं?सीएसएस: ऊंचाई को गतिशील रूप से समायोजित करने के लिए बाएं फ्लोट div कैसे बनाएं?

तो क्या मैं पूरा करने के लिए कोशिश कर रहा हूँ कि दोनों बाएँ और दाएँ div एक ही ऊंचाई (बाएं div सही div की ऊंचाई करने के लिए स्वचालित रूप से व्यवस्थित)

नीचे नमूना कोड है होगा।

अग्रिम धन्यवाद :)

चीयर्स, मार्क

<html> 
<head> 
    <style type="text/css"> 
     body { 
      font-family:verdana; 
      font-size:12px; 
     } 
     .parent { 
      border:1px solid red; 
      width:530px; 
      /*min-height:100%;*/ 
      padding:5px; 
     } 
     .left { 
      border:1px solid blue; 
      width:200px; 
      float:left; 
      position:relative; 
      padding:3px; 
     } 
     .right { 
      border:1px solid green; 
      width:300px; 
      float:right; 
      position: relative; 
      padding:3px; 
     } 
     .clr { clear:both; } 
     .footer { 
      border:1px solid orange; 
      position: relative; 
      padding:3px; 
      margin-top:5px; 
     } 
    </style> 
</head> 
<body> 
    <div class="parent"> 
     <div class="left">float left div here only static content</div> 
     <div class="right"> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
     </div> 
     <div class="clr"></div> 
     <div class="footer">Footer here</div> 
    </div> 
</body> 
</html>

स्रोत

2010-02-25 marknt15

के लिए कामकाजी सीएसएस समाधान है (link के लिए पीडीआर के लिए धन्यवाद):

<html> 
<head> 
    <style type="text/css"> 
     html, body { 
      font-family:verdana; 
      font-size:12px; 
     } 
     .parent { 
      border:1px solid red; 
      width:530px; 
      padding:5px; 
      overflow:hidden; 
     } 
     .left { 
      border:1px solid blue; 
      width:200px; 
      float:left; 
      position:relative; 
      padding:3px; 
     } 
     .right { 
      border:1px solid green; 
      width:300px; 
      float:right; 
      position: relative; 
      padding:3px; 
     } 

     /* a solution but doesn't work in IE */ 
     /* 
     .left, .right { 
      min-height: 100px; 
      height: auto; 
     } 
     */ 

     .left, .right { 
      padding-bottom:8000px; 
      margin-bottom:-8000px; 
      background:none repeat scroll 0 0 lightblue; 
     } 

     .clr { clear:both; } 
     .footer { 
      border:1px solid orange; 
      position: relative; 
      padding:3px; 
      margin-top:5px; 
     } 
    </style> 
</head> 
<body> 
    <div class="parent"> 
     <div class="left">float left div here only static content</div> 
     <div class="right"> 
      float right div dynamic content here<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
      dynamic row<br /> 
     </div> 
     <div class="clr"></div> 
     <div class="footer">Footer here</div> 
    </div> 
</body> 
</html>

स्रोत

2010-02-25 07:56:36 marknt15

मैं इसे एक स्वीकृत उत्तर के रूप में सेट नहीं कर सकता। यह संकेत देता है "आप 21 घंटे में अपना जवाब स्वीकार कर सकते हैं।" मान लीजिए मैं बस इंतजार करूँगा :) – marknt15

यह समाधान केवल आईई 8, एफएफ, क्रोम, सफारी और ओपेरा में काम करता है। मुझे अभी पता चला है कि यह आईई 7 में काम नहीं करता है। मुझे एक और समाधान खोजने की जरूरत है या सिर्फ पूरे पृष्ठ को फिर से डिजाइन करना है। (-_-) – marknt15

अगर मैं तुम्हें थे, मैं एक साधारण सीएसएस चाल का उपयोग करें। मुझे लगता है कि इसके बाद के संस्करण कोड का उपयोग करता है जब भी अपनी ऊंचाई से चला जाता है और अधिक से अधिक 200px तो यह 200px मूल्य को पार कर जाएगी इस

.Left, .Right 
{ 
    min-height: 200px; /*because of .Left*/ 
    height: auto; 
}

टिप्पणी की तरह एक सीएसएस वर्ग में .Left और .Right के लिए ऊंचाई असाइन चाहते हैं।

आशा है कि यह मदद

जावास्क्रिप्ट

<script> 
function increaseHeight() 
{ 
    Document.getElementById('LeftDivID').style.height = Document.getElementById('RightDivID').style.height; 
} 
</script>

के साथ पूर्ण करें जवाब और आप जब सही div की बढ़ती आकार youfinished

स्रोत

2010-02-25 05:30:47

मैंने आपके समाधान bu की कोशिश की यह गलत है। यहां स्क्रीनशॉट है: http://i.imgur.com/UzIoY.jpg यदि सही div गतिशील रूप से एक सामग्री जोड़ता है तो बाएं div की ऊंचाई अब समायोजित नहीं होगी। – marknt15

ऐसा इसलिए है क्योंकि आपने ऑटो टू राइट सेट किया है (मेरा मतलब है कि आप इसे स्वचालित रूप से बढ़ा रहे हैं और स्वचालित रूप से एक अप्रासंगिक तत्व को बढ़ाना चाहते हैं। ऐसा करने के लिए आपको जावास्क्रिप्ट का उपयोग करना होगा। –

@ मार्क - मैंने अपना जवाब संपादित किया है जावास्क्रिप्ट che4ck आउट –

यहाँ सूचीबद्ध विकल्पों में से एक संख्या हैं यह कॉल करनी होगी

http://www.ejeliot.com/blog/61

आम तौर पर, मुझे लगता है कि आप खुद से पूछना चाहेंगे कि क्या आप वास्तव में दो कॉलम चाहते हैं। यह हो सकता है कि आप मूल div में अपनी स्थिर सामग्री और एक बच्चे div ([संपादित करें] या इसके विपरीत में अपनी गतिशील सामग्री के साथ बेहतर हो)।

स्रोत

2010-02-25 05:39:38 pdr

धन्यवाद बहुत पीडीआर मैं अपना समाधान पोस्ट करूंगा। आपके लिंक ने मुझे इस समाधान के लिए प्रेरित किया: http://www.ejeliot.com/samples/equal-height-columns/example-6।एचटीएमएल – marknt15

बाहर कोड के बाद, मैं फ़ायरफ़ॉक्स के साथ यहाँ की कोशिश की कोशिश, लेकिन आशा है कि यह सभी ब्राउज़रों

<html> 
<head> 
    <style type="text/css"> 
     body { 
      font-family:verdana; 
      font-size:12px; 
     } 
     .parent { 
      border:1px solid red; 
      width:530px; 
      /*min-height:100%;*/ 
      padding:5px; 
     } 
     .parent_new { 
      border:1px solid red; 
      width:530px;    
      padding:5px; 
      display: table-cell; 
     } 
     .row_level 
     { 
      display:table-cell; 
     } 
     .cell-level { 
      display:table-cell; 
      border:1px solid red; 
     } 
     .left { 
      border:1px solid blue; 
      width:200px; 
      float:left; 
      position:relative; 
      padding:3px; 
     } 
     .left { 
      border:1px solid blue; 
      width:200px; 
      float:left; 
      position:relative; 
      padding:3px; 
      display:table-row; 
     } 
     .right { 
      border:1px solid green; 
      width:300px; 
      float:right; 
      position: relative; 
      padding:3px; 
     } 
     .clr { clear:both; } 
     .footer { 
      border:1px solid orange; 
      position: relative; 
      padding:3px; 
      margin-top:5px; 
     } 
    </style> 
</head> 
<body> 
    <div class="parent_new"> 
     <div class="row_level"> 
     <div class="cell-level">float left div here only static content 
     </div> 
     <div class="cell-level"> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
      float right div dynamic content here<br /> 
     </div> 
     </div> 
     <div class="clr"></div> 
     <div class="footer">Footer here</div> 
    </div> 
</body> 
</html>

स्रोत

2010-02-25 05:45:20 shahjapan

दुर्भाग्य से मैंने इसका परीक्षण किया लेकिन यह आईई ब्राउज़र में काम नहीं करता है। धन्यवाद हालांकि :) – marknt15

A List Apart इस विषय पर कुछ उत्कृष्ट लेख है के सबसे पर काम करेगा, उदाहरण के Faux Columns और Multi-column layouts climb out of the box

स्रोत

2010-02-25 07:11:41 Marius

सीएसएस: ऊंचाई को गतिशील रूप से समायोजित करने के लिए बाएं फ्लोट div कैसे बनाएं?

उत्तर

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