एचटीएमएल पेज

Question

में स्वतंत्र कॉलम स्क्रॉल मेरे पास मेरे HTML पृष्ठ में दो कॉलम हैं।

<div id="content"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

उनमें से प्रत्येक पर पेज

#left { 
    float: left; 
    width: 50%; 
} 

#right { 
    float: left; 
    width: 50%; 
} 

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

Answer 1

See this fiddle

#content, html, body { 
    height: 98%; 
} 
#left { 
    float: left; 
    width: 50%; 
    background: red; 
    height: 100%; 
    overflow: scroll; 
} 
#right { 
    float: left; 
    width: 50%; 
    background: blue; 
    height: 100%; 
    overflow: scroll; 
} 

Answer 2

हां। आपको उनकी ऊंचाई को सीमित करना होगा। एक कामकाजी उदाहरण के लिए See this fiddle।

#content { 
    height: 10em; 
} 
#left { 
    float: left; 
    width: 50%; 
    background-color:#F0F; 
    max-height:100%; 
    overflow: scroll; 
} 

#right { 
    float: left; 
    width: 50%; 
    background-color:#FF0; 
    max-height:100%; 
    overflow: scroll; 
} 

Answer 3

कॉलम के लिए ऊंचाई सेट करें, और overflow: auto सेट करें। आप एक ही सीएसएस चयनकर्ता के अंदर सभी नियम भी डाल सकते हैं। इस तरह:

#left, #right { 
    float: left; 
    width: 50%; 
    height: 200px; /* Set your height here */ 
    overflow: auto; 
} 

Answer 4

सरल में, अपने सीएसएस इस तरह

#content div{ 
    height: 300px; 
    width:200px; 
    float: left; 
    border:1px solid blue; 
    overflow-y: auto; 
} 

देखें LIVE DEMO

Answer 5

पहले पोस्टिंग एक छोटे से सुधार लिखें:

• 100% एचटीएमएल और शरीर के आकार .... स्क्रॉल पट्टी के बिना छोड़ दिया के लिए
• मार्जिन और सही बक्से
• व्यक्ति स्क्रॉलबार केवल आवश्यकता ("ऑटो")
• कुछ अन्य विवरण: यह प्रयास करें !

फिडल: 2 independently scrolling divs

html, body { 
    height: 100%; 
    overflow: hidden; 
    margin: 0; 
} 
#content { 
    height: 100%; 
} 
#left { 
    float: left; 
    width: 30%; 
    background: red; 
    height: 100%; 
    overflow: auto; 
    box-sizing: border-box; 
    padding: 0.5em; 
} 
#right { 
    float: left; 
    width: 70%; 
    background: blue; 
    height: 100%; 
    overflow: auto; 
    box-sizing: border-box; 
    padding: 0.5em; 
}