सीएसएस - 100% शून्य से #px की ऊँचाई - शीर्ष लेख और पाद

Question

संबंधित वेबपेज इस तरह दिखता है:

// The Header // 
/*   */ 
/* CONTENT */ 
/*   */ 
// The footer // 

दोनों शीर्ष लेख और पाद ऊंचाइयों तय कर दी है। आइए उदाहरण के लिए कहें कि दोनों की ऊंचाई 20px है। मुझे सामग्री की ऊंचाई को 100% घटाकर 40px (हेडर + फ़ूटर हाइट्स) सेट करने की आवश्यकता है। मुझे पता है कि मैं इसे आसानी से जावास्क्रिप्ट के साथ कर सकता हूं, लेकिन यह सीखना अच्छा होगा कि सादा सीएसएस के साथ इसे कैसे किया जाए, यदि यह संभव हो।

Answer 1

#header /* hypothetical name */ 
{ 
    height:100%; 
} 

#header p /* or any other tag */ 
{ 
    margin:20px 0 20px 0; 
} 

बस एक ही टैग में मार्जिन और ऊंचाई न रखें। आप कुछ पागल परिणाम अनुभव करेंगे।

Answer 2

शीर्षलेख और पाद लेख पर एक निश्चित स्थिति रखें और उन्हें क्रमशः विंडो के नीचे के शीर्ष पर चिपके रहने के लिए सेट करें। फिर 20px के सामग्री क्षेत्र पर एक शीर्ष और नीचे पैडिंग रखें।

#header{position:fixed;top:0} 
#footer{position:fixed;bottom:0} 
#content{padding:20px 0} 

Answer 3

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

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 4

Marnix का जवाब ऊपर और सामग्री तत्व के नीचे गद्दी का उपयोग कर शामिल है; मेरा शीर्ष और निचली सीमा का उपयोग करना शामिल है।

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

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#content { 
    height: 100%; 

    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
     /* Ensure that the height of the element includes the 
     box border, not just the content */ 

    border: 0; 
    border-top: 20px solid white; 
    border-bottom: 20px solid white; 
     /* Leave some space for the header and footer to 
     overlay. */ 
} 
#header, 
#footer { 
    position: fixed; 
    left: 0; 
    right: 0; 
    height: 20px; 
    background-color: #eee; 
     /* Specify a background color so the content text doesn't 
     bleed through the footer! */ 
} 
#header { 
    top: 0; 
} 
#footer { 
    bottom: 0; 
} 

यह मैक के लिए गूगल क्रोम 24 में काम करता है:

यहाँ मेरी नमूना सीएसएस है। हालांकि, मैंने अन्य ब्राउज़रों में इसे आजमाया नहीं है।

उम्मीद है कि यह किसी और की मदद करेगा जो अभी भी एक टेबल का उपयोग करने के लिए प्रलोभन का सामना कर रहा है और पृष्ठ लेआउट पहले से ही प्राप्त कर रहा है। :-)

Answer 5

आपके ब्राउज़र CSS3 का समर्थन करता है, तो ब्राउज़र संगतता विकल्पों को जोड़ने के लिए सीएसएस तत्व Calc()

height: calc(100% - 65px); 

आप भी चाहते हो सकता है का उपयोग करके देखें:

height: -o-calc(100% - 65px); /* opera */ 
height: -webkit-calc(100% - 65px); /* google, safari */ 
height: -moz-calc(100% - 65px); /* firefox */