शीर्षलेख और पाद लेख के बीच 100% के साथ सामग्री

Question

मान लें कि मेरे पास निम्न लेआउट है (नीचे छवि देखें) ... मेरे पास शीर्ष पर एक शीर्षलेख (ए) है, पाद लेख (सी) जो हमेशा नीचे और कंटेनर पर होता है (बी) जो बीच में है और शीर्षलेख और पाद लेख के बीच बाईं ओर स्थित स्थान को 100% तक भरना चाहिए।

किसी भी तरह से यह कैसे का उपयोग कर शुद्ध सीएसएस प्राप्त करने के लिए के बारे में सोच नहीं सकता। किसी भी सुझाव की सराहना की जाएगी!

Answer 1

आपके पृष्ठ को कैसे सेट अप किया गया है, इस पर निर्भर करता है, यदि आप कंटेनर तत्व के लिए height: 100%; (बी) और position: absolute; सेट करते हैं तो यह काम कर सकता है। यहाँ एक उदाहरण है:

HTML:

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div>​ 

सीएसएस:

#container { 
    height: 100%; 
    width: 100%; 
    background: green; 
    position: absolute; 
} 
#header, #footer { 
    height: 100px; 
    width: 100%; 
    background: red; 
} 
#body { 
    height: 100%; 
    width: 100%; 
    background: blue; 
}​ 

jsFiddle

Answer 2

आपका प्रश्न काफी जैसे कैसे मानक ब्लॉक स्तर तत्वों, का वर्णन करता है डीआईवी, व्यवहार करते हैं। केंद्र div हमेशा दोनों के बीच अंतरिक्ष का 100% ले जाएगा, और यह इसके आंतरिक सामग्री के आधार पर बढ़ेगा।

उसने कहा, मुझे लगता है कि आप एक फिक्स्ड पाद लेख चाहते हैं - जो ब्राउज़र विंडो के नीचे स्थित रहता है। यह कई तकनीकों का, जिनमें से एक absolutly उपयोग कर रहा है स्थिति का उपयोग कर achiavable है:

<div id="header">Header</div> 
<div id="content">Main Content</div> 
<div id="footer">Footer</div> 

शैली:

#header, #footer, #content { position: absolute; left: 0; width: 100%; } 
#header, #footer { overflow: hidden; background: #444; height: 100px; } 
#header { top: 0; } 
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; } 
#footer { bottom: 0; }​ 

http://jsfiddle.net/U9wfy/

Answer 3

मैं इस सवाल में आए और सोचा था कि एक और अधिक "आधुनिक" जवाब सहायक होगा। यह लेआउट आसान flexbox ..

https://www.codeply.com/go/1QgRb4uFmj

<header> 
</header> 
<main></main> 
<footer> 
</footer> 

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

body { 
    display: flex; 
    flex-direction: column; 
} 

header, 
footer { 
    flex: none; 
    background: #ddd; 
} 

main { 
    overflow-y: scroll; 
    flex: auto; 
}