सीएसएस तरल लेआउट जहां पाद लेख div के आकार का पालन करता है और नीचे रहता है - सीएसएस, लेआउट, एचटीएमएल, तरल लेआउट

मैं निम्नलिखित लेआउट संरचना पर काम कर रहा हूं:

<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>

निम्नलिखित सीएसएस के साथ मैंने पेज के निचले हिस्से में पाद लेख सेट किया है:

#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}

स्कीमा जारी करें

यदि "पेजकंटनर div" में सामग्री हैछोटा, मैं div में स्क्रॉल बार नहीं दिखाना चाहता हूं लेकिन "पेजकंटनर div" के तल पर पाद लेख संलग्न करता हूं (ठीक नहीं है कि पाद लेख हमेशा व्यूपोर्ट के नीचे होता है)

यदि "पेजकंटनर div" की सामग्री लंबे समय तक है, तो मुझे व्यूपोर्ट (नीचे) में दिखाई देने के लिए पाद लेख की आवश्यकता है और "पेजकंटनर div" में स्क्रॉल बार दिखाएं।

मैं यह कैसे करु? कोई विचार? धन्यवाद!

पीएस: मुझे ऐसे समाधान की आवश्यकता है जो जेएस का उपयोग न करे।

उत्तर:

जवाब के लिए 0 № 1

यदि मैंने आपको सही तरीके से पढ़ा है, तो आप व्यूपोर्ट में उपलब्ध रीयल-एस्टेट के सापेक्ष किसी तत्व के आकार के आधार पर, स्थिति के वर्णन से संबंधित स्थिति का वर्णन कर रहे हैं।

काफी निश्चित रूप से, आप जावास्क्रिप्ट के बिना इसे प्राप्त नहीं कर सकते हैं।

लेकिन एक समाधान जहां फूटर हमेशा व्यूपोर्ट के नीचे होता है, जावास्क्रिप्ट के बिना काफी आम और आसान है। यदि आपको पहले से ही पता नहीं है कि यह कैसे करें:

#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}

जवाब के लिए 0 № 2

मुझे लगता है कि आप ऐसा कुछ कर सकते हैं:

#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}​

ध्यान दें कि आपको प्रतिशत में अपनी ऊंचाई निर्दिष्ट करने की आवश्यकता है। पैडिंग भी एक मुद्दा हो सकता है।


संबंधित सवाल
सबसे लोकप्रिय