फिक्स्ड हेडर और फ़ूटर के साथ एक div में स्क्रॉलबार कैसे प्राप्त करें?

मेरे पास एक वेबसाइट है और स्क्रॉलबार के साथ कुछ समस्याएं हैं।फिक्स्ड हेडर और फ़ूटर के साथ एक div में स्क्रॉलबार कैसे प्राप्त करें?

मैं चाहता हूं कि मैं इस छवि के साथ सबसे अच्छी व्याख्या कर सकूं।

My Website

लेकिन मैं इस तरह स्क्रॉलबार नहीं मिल सकता है।

मैं कुछ कोशिश की है, यहाँ jsfiddle

इस बेला में है मैं भी है:

div[role="main"] 
{ 
    overflow-y: scroll; 
    margin: 60px 0; 
}

लेकिन इस मार्जिन ठीक नहीं है हैडर जानने के बिना कैसे मुझे पता है कि मार्जिन मैं क्या ज़रूरत है, और पाद लेख ऊंचाई।

स्रोत

2012-12-06 Ron van der Heijden

आप जावास्क्रिप्ट/jQuery का उपयोग कर इस लेआउट प्राप्त कर सकते हैं बिना हैडर की ऊंचाई knowint और पाद लेख। जावास्क्रिप्ट स्वचालित रूप से प्रत्येक संकल्प पर आपके लिए div भूमिका = मुख्य की ऊंचाई के लिए गणना करता है। क्या आपने कोशिश की है? – w3uiguru

@HappySingh आप कहां से हैं? – Jack

यह एचटीएमएल/सीएसएस द्वारा संभव होना चाहिए। मैंने इसे पहले देखा है लेकिन इसे वापस नहीं मिला। –

इसे पैडिंग और बॉक्स-साइजिंग = शरीर पर सीमा-बॉक्स का उपयोग करके धीमा किया जा सकता है (शरीर की ऊंचाई 100% के साथ यह ऊंचाई में पैडिंग की गणना करेगा, इसलिए स्क्रॉल वाला बॉक्स बिल्कुल ठीक होगा शीर्ष लेख और पाद)

html { 
overflow: hidden; 
height: 100%; 
} 

body { 
padding: 60px 0px; 
height: 100%; 
box-sizing: border-box; 
} 

div[role="main"] { 
overflow-y: scroll; 
height: 100%; 
}

देख http://jsfiddle.net/wPucQ/

संपादित करें: कोड

स्रोत

2012-12-06 11:01:31 SergeS

बस स्क्रू बार को पाद लेख के पीछे जा रहा है जो सटीक समाधान नहीं है। – w3uiguru

क्या आपने jsfiddle को देखा था? (या आप मोज़िला 3.6 -/आईई 7- का उपयोग कर रहे हैं) – SergeS

Google क्रोम में यह काम करता प्रतीत होता है। लेकिन फ़ायरफ़ॉक्स में यह नहीं है :( –

इस div div [role = "main"] {overflow-y: scroll; के लिए न्यूनतम ऊंचाई या ऊंचाई का उल्लेख करने का प्रयास करें; मार्जिन: 60 पीएक्स 0; न्यूनतम ऊंचाई: 400 पीएक्स;}

स्रोत

2012-12-06 10:50:03 Gopikrishna

उल्लेख ऊंचाई बहुत कठिन है अगर मुझे उपयोगकर्ता की स्क्रीन ऊंचाई नहीं पता है। बस कुछ पीएक्स सही तरीका नहीं है। % एक और विकल्प है, लेकिन आजकल ब्राउज़र/डिवाइस में फोंट अलग-अलग पीएक्स ऊंचाई हैं। –

में जोड़ा गया भूल HTML टैग आप स्क्रॉल करने योग्य तत्व ऊंचाई देने के लिए इतना स्क्रॉल बार स्थिति गणना की जा सकती की जरूरत है।

div[role="main"] 
{ 
    height:400px; 
    overflow-y: scroll; 
    margin: 60px 0; 
}

http://jsfiddle.net/gkxV4/

स्रोत

2012-12-06 11:01:50 Keyo

सेटिंग ऊंचाई बड़ी स्क्रीन के लिए काम नहीं करेगी। –

यदि आप इसे संपूर्ण पृष्ठ प्रदर्शित करने के लिए उपयोग कर रहे हैं तो यह हेडर/फ़ूटर को व्यूपोर्ट में चिपचिपा करने के लिए बहुत आसान (और अधिक उपयोग करने योग्य) होगा। – Keyo

क्या आप निश्चित हेडर और पाद लेख चिपचिपा मतलब है? Cuz कि मैंने क्या किया :) –

-1

fiddle http://jsfiddle.net/MA9k3/7

Jquery कोड पूरे तर्क के लिए मेरे बेला देखें: आसानी से

var doc_height = $(window).innerHeight(); 

var header_height = $("header").height(); 
var footer_height = $("footer").height(); 

var div_height = doc_height - (header_height + footer_height); 

$("#content").css({ 
    "height": (div_height - footer_height) + "px", 
    "margin-bottom": footer_height + "px" 
}); 

alert($("#content").height());

स्रोत

2012-12-06 11:24:35 w3uiguru

@bondye यह प्रत्येक रिज़ॉल्यूशन पर काम करेगा। – w3uiguru

मैंने जावास्क्रिप्ट और न ही jQuery का उल्लेख नहीं किया। शुद्ध एचटीएमएल सीएसएस में यह संभव है। मैंने इसे पहले देखा है। चलो, आपकी मदद के लिए धन्यवाद। सभी मदद का स्वागत है :) –

तो आप इस पहेली को ढूंढ रहे हैं: http://jsfiddle.net/mvivekc/2a7SB/1/ या इसे देखें: http: //stackoverflow.com/questions/9167160/conditional-sticky-css -फुटर-साथ-फिक्स्ड-हेडर – w3uiguru

फिक्स्ड हेडर और फ़ूटर के साथ एक div में स्क्रॉलबार कैसे प्राप्त करें?

उत्तर

संबंधित मुद्दे