सीएसएस के साथ निम्नलिखित भी संभव है? यदि नहीं, तो क्या हरे रंग का बॉक्स सामग्री बदलता है, भले ही जावास्क्रिप्ट ईवेंट का उपयोग किया जाएगा?वर्टिकल रूप से तीन तत्वों को स्थिति दें: लचीला बॉक्स, स्क्रॉल बॉक्स और फिक्स्ड बॉक्स
मैं स्थिति तीन बक्से खड़ी करना चाहते हैं:
- पहले एक (हरा एक) सामग्री के कुछ चर राशि हो सकती है, और बॉक्स सामग्री फिट करने के लिए विस्तार करना चाहिए। यह बॉक्स ब्राउज़र के शीर्ष के साथ फ्लश होना चाहिए।
- अंतिम, पीले रंग की एक निश्चित मात्रा में सामग्री होगी (जिसका अर्थ है कि सामग्री 'संकलन समय' पर क्या है)। यह बॉक्स ब्राउज़र के नीचे से फ्लश होना चाहिए।
- मध्य एक, लाल रंग में, सामग्री की एक लचीली मात्रा होगी, और हरे रंग के बॉक्स के नीचे से पीले रंग के बक्से के ऊपर से विस्तार किया जाना चाहिए, और आंतरिक रूप से इसे स्क्रॉल करने योग्य होना चाहिए यदि इसकी सामग्री बड़ी है बॉक्स का आकार
यही वह है जो मुझे अब तक मिला है, और यह काफी काम नहीं करता है - मैं इस तरह से व्यूपोर्ट के नीचे पीले रंग के ब्लाउश के नीचे फ्लश करने के लिए प्रतीत नहीं कर सकता लाल बॉक्स को सभी अतिरिक्त जगह ले जाने दें (यानी स्थिति: पूर्ण मदद नहीं करता है)।
#container {
float: left;
height: 100%;
background-color:gray;
}
#header {
background-color: green;
}
#main {
overflow: auto;
background-color: red;
height: 70%;
}
#footer {
background-color:yellow;
}
<div id="container">
<div id="header">START OF HEADER CONTENT...</div>
<div id="main">Craft beer jean shorts...</div>
<div id="footer">footer some stuff goes here</div>
</div>
और यह यह क्या लग रहा है की तरह है:
यहाँ एक jsfiddle है: https://jsfiddle.net/n6cmdcj3/, लेकिन, ध्यान दें यह मदद नहीं कर सकते हैं के रूप में एचटीएमएल बॉक्स व्यूपोर्ट आकार का पालन नहीं करता है - नहीं यकीन है कि कैसे यह इतना
आप कृपया jsfiddle.net या codepen.io या इसी तरह की पर एक काम उदाहरण बनाना सकते हैं? – HerrSerker
हो गया, लेकिन टिप्पणी देखें। – Colin
प्लस 1 अच्छा होंठम के लिए :) –