सीएसएस के बारे में दो कॉलम लेआउट

Question

मैंने कभी नहीं सोचा है कि एक साधारण दो कॉलम लेआउट लेखन इतनी जटिल सीएसएस का उपयोग कर रहा है .... haha ​​

मुझे क्या करना चाहते हैं निम्नलिखित है:

1. जब सामग्री div की ऊंचाई स्क्रीन आकार की ऊंचाई से अधिक है, स्क्रॉल बार केवल सामग्री div में मौजूद है। उपयोगकर्ताओं को केवल सामग्री div स्क्रॉल कर सकते हैं लेकिन साइडबार रहता स्थिर

2. दो कॉलम में एक ही ऊंचाई

   मेरे लेआउट है होना चाहिए:

< -------- ------- कंटेनर ------------------->

< ----------------- --header ------------------>

< ----- साइडबार -------> < --------- सामग्री --->

< --------------- --- पाद लेख ------------------->

< --- कंटेनर का अंत --------------- ---------->

यहाँ मेरी सीएसएस फ़ाइल है: http://137.189.145.40/c2dm/css/main.css

धन्यवाद/

Answer 1

#WorldContainer 
{ 
    width: 1000px; 
    margin: auto; 
    overflow: hidden; 
} 

.ContentColumn 
{ 
    float: left; 
    width: 500px; 
    overflow: auto; 
} 

<div id="WorldContainer"> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
</div> 

यह आपको एक पृष्ठ देगा जहां मुख्य div स्क्रॉल नहीं कर सकता है लेकिन दो div कॉलम कर सकते हैं। वे एक तरफ होंगे। आप सवाल बिल्कुल स्पष्ट नहीं थे इसलिए आशा है कि यह वही है जो आप बाद में थे।

संपादित करें: उदाहरण साइट दिखाने के जवाब में।

आपकी समस्या वास्तव में सरल है।

आपके सभी divs के height: 100%; का ऊंचाई नियम है जब आप प्रतिशत ऊंचाई का उपयोग करते हैं, तो आप इसे कंटेनर का प्रतिशत बनाते हैं, यानी इसके मूल कंटेनर हैं। यह पूरी विंडो की प्रतिशत ऊंचाई नहीं है।

प्रत्येक कंटेनर प्रतिशत ऊंचाई निर्दिष्ट कर रहा है, इसलिए परिणाम 0 की ऊंचाई है। अपना बाहरी भाग एक निश्चित ऊंचाई दें और समस्या हल हो जाएगी।

अतिरिक्त संपादित करें:

क्या आप वाकई सबसे बाहरी div हमेशा तो खिड़की के नीचे करने के लिए फैला है इस पूर्ण स्थिति का उपयोग कर एक सीएसएस हल है बनाने के कारण चिंतित हैं:

#OutermostDiv 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

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

Answer 2

आप overflow:hidden; पर अपने कंटेनर तत्व सेट करना होगा , और आपकी सामग्री div overflow:scroll; पर (और संभवतः क्षैतिज स्क्रॉलबार को छिपाने के लिए overflow-x:hidden; करें)। इसके साथ समस्या यह है कि यदि आपकी साइडबार & सामग्री एक ही ऊंचाई होगी, तो आपको दो स्क्रॉलबार होंगे - एक सामग्री के लिए, और एक साइडबार के लिए।

आप शायद साइडबार & सामग्री के आस-पास एक और कंटेनर तत्व का उपयोग करके इसे हल कर सकते हैं, और साइडबार/सामग्री के बजाय overflow: scrollbar; overflox-x:hidden; सेट कर सकते हैं।

Answer 3

तुम भी display:table और display:table-cell का उपयोग आप float के साथ कठिनाइयों का सामना कर रहे हैं, तो कॉलम बनाने के लिए कर सकते हैं। यहाँ सीएसएस है:

#container 
{ 
width:960px; 
margin:0; 
padding:0; 
display:table; 
} 
#sidebar 
{ 
width:300px; 
display:table-cell; 
} 
#content 
{ 
width:660px; 
display:table-cell; 
} 

और HTML है:

<div id="container"> 

<div id="sidebar"> 
<!-- Sidebar Content Here --> 
</div> 

<div id="content"> 
<!-- Content Here --> 
</div> 

</div> 

आशा यह आपकी समस्या का हल। लेकिन display:table कुछ पुराने ब्राउज़रों में काम नहीं करता है।