स्क्रॉल करने योग्य सामग्री और पाद लेख के साथ शीर्षलेख/सामग्री/पाद लेख लेआउट व्यूपोर्ट

Question

इस प्रश्न के लिए बहुत सारे अर्ध-डुप्लीकेट हैं, मुझे पता है: webpage template where content takes full height of viewport if has 1 line minus footer एक है, लेकिन यह वही नहीं है जो मैं चाहता हूं; यह उल्लसित सवाल है: How to create an HTML CSS Page with Header, Footer and Content जो मुझे लगता है कि ज्यादातर मुझे बताता है, लेकिन दुर्भाग्यवश यह कुछ हद तक अनजान है और वास्तव में कोई जवाब नहीं है। मैं मदद कर बातें मैं शायद अपने आप के लिए यह पता लगाने सकता है की बहुत सारी मिल जाती है और जो मैं नहीं करना चाहता:

• फिक्स्ड शीर्ष, पादुका कम सामग्री के लिए तल पर तय हो गई है, लेकिन पेज बंद नीचे धक्का दे दिया जब सामग्री अब है (इस दोहराई सेटअप यहाँ की तरह: http://boagworld.com/technology/fixed-footers-without-javascript)
• फिक्स्ड हैडर, सामग्री, और पाद लेख, जहां पाद लेख व्यूपोर्ट नीचे करने के लिए पिन नहीं की है
• फिक्स्ड शीर्ष लेख और पाद जहां सामग्री स्क्रॉल "पीछे" शीर्ष लेख और पाद - यह एक प्यारा है और मैं इसे का उपयोग किया है, लेकिन यह मैं क्या चाहते हैं नहीं है पल

पर

मुझे पता है कि मैं मैं क्या चाहते है, तो मैं "टूटी हुई" या "सीमा-बॉक्स" बॉक्स मॉडल का उपयोग कर रहे थे चाहते हैं: जहाँ भी मैं यह चाहता था

1. एक 100% ऊंचाई कंटेनर रखो पृष्ठ पर क्षैतिज, सामग्रियों से निपटने के लिए "स्थिति: रिश्तेदार" के साथ थोड़ा आसान
2. कंटेनर में, तीन बिल्कुल-स्थित divs डालें: हेडर, जो शीर्ष पर फंस जाता है (निश्चित ऊंचाई के साथ); पाद लेख, नीचे फंस गया (भी तय ऊंचाई); और सामग्री, ऊंचाई 100% लेकिन शीर्षलेख और शीर्षलेख के लिए खाते में पैडिंग के साथ सामग्री के साथ।

"टूटा हुआ" बॉक्स मॉडल में, सामग्री बॉक्स देने से 100% ऊंचाई बढ़िया काम करती है, क्योंकि ऊंचाई में ऊपर और नीचे पैडिंग शामिल होती है। यह आईई 6 क्विर्क मोड में भी बहुत अच्छा काम करता है, और फ़ायरफ़ॉक्स के लिए मैंने अभी "-मोज़-बॉक्स-साइजिंग: सीमा-बॉक्स" का उपयोग किया होगा; इसे एक ही तरीके से काम करने के लिए।

लेकिन यहां हम भविष्य में रह रहे हैं, चंद्रमा उपनिवेशों और जमे हुए नाश्ता पिज्जा के साथ, इसलिए मैं "सीमा-रेखा" दिनों के बारे में ज्यादा याद दिलाने की कोशिश नहीं करता हूं। इस लेआउट तकनीक के साथ "पाने" के लिए सबसे कठिन बात यह है कि स्क्रॉलिंग सामग्री कैसे करें। फिर, बिल्कुल-तैनात शीर्ष लेख और पाद

, साथ:

1. फिर, एक 100% ऊंचाई कंटेनर के साथ शुरू, "रिश्तेदार की स्थिति:" केवल दृष्टिकोण है कि मैं के बारे में सोच सकते हैं इसके बाद के संस्करण पर एक hackish भिन्नता है निश्चित ऊंचाइयों।
2. सामग्री के लिए, मैं बिल्कुल एक विशिष्ट ऊंचाई के साथ एक div में ड्रॉप करता हूं, लेकिन शीर्षलेख और पाद लेखों के अनुसार "शीर्ष" और "नीचे" सेट के साथ।

तकनीक वास्तव में IE6 में काम नहीं करेगा कि; अच्छा, वास्तव में यह बिल्कुल काम नहीं करेगा, क्योंकि आईई 6 "शीर्ष" और "नीचे" दोनों को स्थापित करने के निहितार्थ से ऊंचाई प्राप्त नहीं करता है। मैं उस सीएसएस में "सक्रिय" सामान का उपयोग कर सकता हूं जो आईई जावास्क्रिप्ट के साथ ऊंचाई की प्रभावी गणना करने के लिए समर्थन करता है, लेकिन मुझे लगता है कि यह बहुत घृणास्पद है।

मैं वेब पर बहुत समान लेआउट समस्याओं के विवरण का एक बहुत माध्यम से किया गया है, लेकिन मुख्य बात मैं अभी तक खोजने के लिए कि स्क्रॉल करने के लिए है कि मध्यम सामग्री बॉक्स प्राप्त करने के लिए एक अच्छी तकनीक है।मुझे एहसास है कि हेडर और पाद लेख के लिए शीर्ष-और नीचे-मार्जिन सेट के साथ एक सामग्री बॉक्स का उपयोग करना संभव हो सकता है, लेकिन मुझे नहीं पता कि इसकी ऊंचाई को कैसे बाधित किया जाए ताकि स्क्रॉल बार में लात हो सही बिंदु (जब वास्तविक सामग्री शीर्षलेख के नीचे और पाद लेख के शीर्ष के बीच की जगह को बहती है)।

विचार? टेम्पलेट्स के खजाने-ट्रोव के लिए लिंक? (बीटीडब्ल्यू मैथ्यू जेम्स टेलर का डोमेन इस समय चला गया प्रतीत होता है, बल में एक बड़ी गड़बड़ी पैदा कर रहा है।) मैं विचारों से काफी दूर हूं।

अद्यतन यहाँ मैं क्या चाहते का एक नमूना है: http://gutfullofbeer.net/dreamlayout.html

कि उदाहरण पेज फ़ायरफ़ॉक्स और क्रोम में काम करना चाहिए और मैं सफारी लगता है, और यह क्योंकि निश्चित रूप से IE8 में आधा काम करता है (केवल आधा हम नहीं कर सके उम्मीद नहीं है कि माइक्रोसॉफ्ट को "-एम-सीमा-बॉक्स" ठीक से काम करने के लिए मिलेगा)।

अगर मैं कुछ प्रतिभा मुझे एक आईई हैक दे सकता हूं तो मैं "जावास्क्रिप्ट" टैग जोड़ रहा हूं जो बहुत विद्रोह नहीं कर रहा है।

एक और अपडेट यहां "समझौता" लेआउट है, जहां केंद्रीय सामग्री एक बाहरी कंटेनर द्वारा स्क्रॉल बार की आपूर्ति के साथ हेडर और पाद लेख "नीचे" स्क्रॉल करती है। यह वास्तव में आपके स्वाद के आधार पर प्यारा दिखता है, और यह आईई 6 में काम करता है और मुझे लगता है कि हर जगह (हालांकि मैंने ओपेरा की कोशिश नहीं की है)। पाठ्यक्रम के रंगों को अनदेखा करें; वे नैदानिक ​​सहायता के रूप में बस वहाँ हैं।

http://gutfullofbeer.net/compromiselayout.html

Answer 1

हो सकता है कि यह तुम्हारी मदद करेगा: (आप jQuery की जरूरत है)

$(function() { 
 
\t $("#toggle-content").click(function() { 
 
     $(".more-content").toggleClass("less-content"); 
 
\t }); 
 
});

body { 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    width: 50%; 
 
} 
 

 
.fixed-top { 
 
    width: 100%; 
 
    height: 20vh; 
 
    background: #faa; 
 
} 
 

 
.wrapper { 
 
    positon: static; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 20vh; 
 
    background: #ffa; 
 
} 
 

 
.fixed-bot { 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 20vh; 
 
    background: #faa; 
 
    opacity: .5; 
 
    bottom: 0; 
 
} 
 

 
.more-content { 
 
    /* display: block; */ 
 
    overflow-y: scroll; 
 
    transition: all 0.3s ease; 
 
    height: 40vh; 
 
    
 
} 
 

 
.less-content { 
 
    height: 0; 
 
} 
 

 
/* 
 
other styles 
 
*/ 
 

 
h1,h2 { 
 
    margin-bottom: 0; 
 
    margin-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="fixed-top"><h1>THIS IS HEADER CONTENT</h1> 
 
    <button id="toggle-content" type="button">MORE/LESS</button> 
 
</header> 
 
<section class="wrapper"> 
 
    <section class="content"><h2>CONTENT</h2>, Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. 
 
    </section> 
 
    <section class="more-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p> 
 
</section> 
 
<footer class="fixed-bot"> 
 
</footer> 
 
</section>