दो कॉलम पेज पर, मैं बाएं div को सीएसएस या जावास्क्रिप्ट का उपयोग करके दाएं div की एक ही ऊंचाई पर कैसे बढ़ा सकता हूं?

Question

मैं एक div- आधारित लेआउट का उपयोग कर दो कॉलम पेज बनाने की कोशिश कर रहा हूं (कृपया कोई टेबल नहीं!)। समस्या यह है कि, मैं दाईं ओर की ऊंचाई से मेल खाने के लिए बाएं div को नहीं बढ़ा सकता। मेरे दाहिने div में आमतौर पर बहुत सारी सामग्री होती है।

यहां समस्या का वर्णन करने के लिए मेरे टेम्पलेट का एक जोड़ा उदाहरण है।

<div style="float:left; width: 150px; border: 1px solid;"> 
    <ul> 
    <li>nav1</li> 
    <li>nav2</li> 
    <li>nav3</li> 
    <li>nav4</li> 
    </ul> 
</div> 
<div style="float:left; width: 250px"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
.... 
</div> 

alt text http://involution.com/images/divlayout.png

Answer 1

इस समस्या के लिए jQuery का उपयोग करें; बस अपने तैयार समारोह में इस फ़ंक्शन को कॉल करें:

function setHeight(){ 
    var height = $(document).height(); //optionally, subtract some from the height 
    $("#leftDiv").css("height", height + "px"); 
} 

Answer 2

आपका सबसे सरल जवाब है जो वर्तमान में कोई ब्राउज़र का समर्थन करता है सीएसएस (3) के अगले संस्करण में निहित है।

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

यदि नेविगेशन इस तरह से स्थित होने के लिए इतना महत्वपूर्ण है, तो इसे शीर्ष पर चलाएं।

आप सीमाओं को कंटेनर और बड़े आंतरिक में ले जाकर दृश्य चाल भी कर सकते हैं, और इसे एक ही आकार के रूप में प्रदर्शित कर सकते हैं।

इससे यह वही दिखता है, लेकिन ऐसा नहीं है।

<div style="border-left:solid 1px black;border-bottom:solid 1px black;"> 
    <div style="float:left; width: 150px; border-top: 1px solid;"> 
    <ul> 
    <li>nav1</li> 
    <li>nav2</li> 
    <li>nav3</li> 
    <li>nav4</li> 
    </ul> 
</div> 
<div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    ... 
</div> 
<div style="clear:both;" ></div> 
</div> 

Answer 3

@hoyhoy

एक डिजाइनर html में यह काम कर सकते हैं, तो वह इस डिजाइन हो सकता है। यदि वह वेब डिज़ाइन का सच्चा गुरु है, तो उसे एहसास होगा कि यह मीडिया की एक सीमा है, क्योंकि पत्रिका विज्ञापनों में वीडियो संभव नहीं है।

यदि वह सीमाओं को बदलने के बजाय 2 कॉलम बराबर महत्व देकर वजन अनुकरण करना चाहते हैं, तो वे समान वजन के समान दिखाई देते हैं, और स्तंभों के फ़ॉन्ट रंग के विपरीत सीमाओं के रंग बनाते हैं ।

लेकिन भौतिक तत्वों को एक ही ऊंचाई बनाने के लिए, आप समय पर इस समय एक टेबल निर्माण के साथ या ऊंचाइयों को स्थापित कर सकते हैं। उन्हें एक ही आकार में अनुकरण करने के लिए, उन्हें एक ही आकार की आवश्यकता नहीं है।

Answer 4

आप इसे jQuery में वास्तव में सरल बना सकते हैं, लेकिन मुझे यकीन नहीं है कि जेएस ऐसी चीजों के लिए उपयोग किया जाना चाहिए। शुद्ध सीएसएस के साथ ऐसा करने का सबसे अच्छा तरीका है। पैरेंट कंटेनर रिश्तेदार:

1. faux columns पर एक नजर डालें या यहाँ तक कि Fluid Faux Columns

2. इसके अलावा एक और तकनीक (सुंदर IE6 पर काम नहीं करता) की स्थिति है। बच्चे के कंटेनर (आपके मामले में नौसेना सूची) को पूर्ण स्थान पर रखा जाना चाहिए और पूरे स्थान पर 'शीर्ष: 0; नीचे: 0; '

Answer 5

यह उन पूरी तरह से उचित, साधारण चीजों में से एक है जो सीएसएस नहीं कर सकता है। सिलवीयू द्वारा सुझाए गए गलत कॉलम, एक हैकी लेकिन कार्यात्मक कामकाज है। यह अगर किसी दिन वहाँ कहने के लिए

 
div.foo { 
height: $(div.blah.height); 
} 

Answer 6

यह सीएसएस में किया जा सकता एक तरीका था सुंदर होगा! लोगों को आपको अन्यथा बताने न दें।

ऐसा करने का सबसे आसान, सबसे दर्द रहित तरीका Faux Columns विधि का उपयोग करना है।

हालांकि, यदि वह समाधान आपके लिए काम नहीं करता है, तो आप this technique पर पढ़ना चाहेंगे। लेकिन चेतावनी दी जानी चाहिए, यह सीएसएस हैकरी की तरह है जो आपको रात के मध्य में ठंडे पसीने में जगाएगी।

इसका सारांश यह है कि आप कॉलम के निचले भाग में बड़ी मात्रा में पैडिंग आवंटित करते हैं, और उसी आकार के नकारात्मक मार्जिन को आवंटित करते हैं। फिर आप अपने कॉलम को उस कंटेनर में रखते हैं जिसमें overflow: hidden सेट है। पैडिंग/मार्जिन मानों को कम या कम करने के लिए बॉक्स को तब तक विस्तार करने की अनुमति मिलती है जब तक कि यह रैपर के अंत तक पहुंच न जाए (जिसे अधिकांश सामग्री वाले कॉलम द्वारा निर्धारित किया जाता है), और पैडिंग द्वारा उत्पन्न कोई भी अतिरिक्त स्थान अतिप्रवाह के रूप में काटा जाता है। यह बहुत मतलब नहीं है, मुझे पता है ...

<div id="wrapper"> 
    <div id="col1">Content</div> 
    <div id="col2">Longer Content</div> 
</div> 

#wrapper { 
    overflow: hidden; 
} 

#col1, #col2 { 
    padding-bottom: 9999px; 
    margin-bottom: -9999px; 
} 

पूरा लेख मैं से जुड़ा हुआ पढ़ लें, वहाँ चेतावनियां और अन्य कार्यान्वयन के मुद्दों के एक नंबर रहे हैं। यह एक सुंदर तकनीक नहीं है, लेकिन यह काफी अच्छी तरह से काम करता है।

Answer 7

इसके बारे में सोचने के लिए आओ, मैंने इसे कॉलम पर नीचे सीमा के साथ कभी नहीं किया है। यह शायद सिर्फ बहती है, और कट ऑफ हो रही है। हो सकता है कि आप नीचे की सीमा एक अलग तत्व से आ सकें जो कॉलम सामग्री का हिस्सा है।

वैसे भी, मुझे पता है कि यह एक आदर्श जादू बुलेट समाधान नहीं है। आपको बस इसके साथ खेलना पड़ सकता है, या इसकी कमियों के आसपास हैक कर सकते हैं।

Answer 8

यह पृष्ठभूमि रंग

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-family: Arial, Helvetica, sans-serif; 
    background: #87ceeb; 
    font-size: 1.2em; 
} 
#container { 
    width:100%; /* any width including 100% will work */ 
    color: inherit; 
    margin:0 auto; /* remove if 100% width */ 
    background:#FFF; 
} 
#header { 
    width: 100%; 
    height: 160px; 
    background: #1e90ff; 
} 
#content {/* use for left sidebar, menu etc. */ 
    background: #99C; 
    color: #000; 
    float: right;/* float left for right sidebar */ 
    margin: 0 0 0 -200px; /* adjust margin if borders added */ 
    width: 100%; 
} 
#content .wrapper { 
    background: #FFF; 
    margin: 0 0 0 200px; 
    overflow: hidden; 
    padding: 10px; /* optional, feel free to remove */ 
} 
#sidebar { 
    background: #99C; 
    color: inherit; 
    float: left; 
    width: 180px; 
    padding: 10px; 
} 
.clearer { 
    height: 1px; 
    font-size: -1px; 
    clear: both; 
} 

/* content styles */ 
#header h1 { 
    padding: 0 0 0 5px; 
} 
#menu p { 
    font-size: 1em; 
    font-weight: bold; 
    padding: 5px 0 5px 5px; 
} 
#footer { 
    clear: both; 
    border-top: 1px solid #1e90ff; 
    border-bottom: 10px solid #1e90ff; 
    text-align: center; 
    font-size: 50%; 
    font-weight: bold; 
} 
#footer p { 
    padding: 10px 0; 
} 
</style> 
</head> 

<body> 


<div id="container"> 
<!--header and menu content goes here --> 

<div id="header"> 
<h1>Header Goes Here</h1> 
</div> 
<div id="content"> 
<div class="wrapper"> 
<!--main page content goes here --> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc 

vitae purus. Aenean viverra malesuada libero. </p> 
</div> 
</div> 

<div id="sidebar"> 
<!--sidebar content, menu goes here --> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p> 
</div> 

<div class="clearer"></div><!--clears footer from content--> 
<!--footer content goes here --> 
<div id="footer"> 
<p>Footer Info Here</p> 
</div> 
</div> 
</body> 
</html> 

Answer 9

सीएसएस का उपयोग कर वहाँ भी एक जावास्क्रिप्ट आधारित समाधान है के साथ किया जा सकता है। यदि आपके पास jQuery है, तो आप नीचे प्लगइन का उपयोग कर सकते हैं।

<script type="text/javascript"> 
// plugin 
jQuery.fn.equalHeights=function() { 
    var maxHeight=0; 

    this.each(function(){ 
     if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;} 
    }); 

    this.each(function(){ 
     $(this).height(maxHeight + "px"); 
     if (this.offsetHeight>maxHeight) { 
      $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px"); 
     } 
    }); 
}; 

// usage 
$(function() { 
    $('.column1, .column2, .column3').equalHeights(); 
}); 
</script> 

Answer 10

मैं इस का उपयोग आईडी "केन्द्र" और "सही" के साथ 2 कॉलम संरेखित करने के लिए:

var c = $("#center"); 
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10); 
var r = $("#right"); 
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10); 

if (c.outerHeight() < r.outerHeight()) { 
    c.height(r.height() + rp - cp); 
} else { 
    r.height(c.height() + cp - rp); 
} 

आशा है कि यह मदद करता है।

Answer 11

सही सामग्री div रूप में एक ही ऊंचाई के साथ बाएं मेनू div बढ़ने के लिए।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
    $(document).ready(function() { 
     var height = $(document).height(); //optionally, subtract some from the height 
     $("#menu").css("height", (height) + "px"); 
     $("#content").css("height", (height) + "px"); 
    }); 
</script> 
<style type="text/css"> 
    <!-- 

    html, body { 
     font-family: Arial; 
     font-size: 12px; 
    } 


    #header { 
     background-color: #F9C; 
     height: 200px; 
     width: 100%; 
     float: left; 
     position: relative; 
    } 

    #menu { 
     background-color: #6CF; 
     float: left; 
     min-height: 100%; 
     height: auto; 
     width: 10%; 
     position: relative; 
    } 

    #content { 
     background-color: #6f6; 
     float: right; 
     height: auto; 
     width: 90%; 
     position: relative; 
    } 

    #footer { 
     background-color: #996; 
     float: left; 
     height: 100px; 
     width: 100%; 
     position: relative; 
    } 
    --> 
</style> 
</head> 


<body> 
<div id="header"> 
    i am a header 
</div> 
<div id="menu"> 
    i am a menu 
</div> 
<div id="content"> 
    I am an example of how to do layout with css rules and divs. 
    <p> I am an example of how to do layout with css rules and divs. </p> 
    <p> I am an example of how to do layout with css rules and divs. </p> 
    <p> I am an example of how to do layout with css rules and divs. </p> 
    <p> I am an example of how to do layout with css rules and divs. </p> 
    <p> I am an example of how to do layout with css rules and divs. </p> 
    <p> I am an example of how to do layout with css rules and divs. </p> 
    <p> I am an example of how to do layout with css rules and divs. </p> 

</div> 
<div id="footer"> 
    footer 
</div> 


</body> 
</html>