प्रोग्रामिंग, सवालों के जवाब में मदद करें / सीएसएस / कंटेंट डिव भरने के लिए शेष ऊंचाई भरें - सीएसएस, एचटीएमएल 5, सीएसएस 3

सामग्री div को शेष ऊंचाई भरें - सीएसएस, एचटीएमएल 5, सीएसएस 3

मेरा एक पेज लेआउट है जिसमें मैंने ए fixed हेडर जिसमें कोई भी ऊंचाई और एक पाद हो सकता हैपृष्ठ के नीचे स्थित है। मैं एक सीएसएस समाधान की तलाश कर रहा हूं ताकि सामग्री div शेष स्थान (लंबवत) भर जाए। नीचे दिए गए jsfiddle में मैंने ऐसा करने की कोशिश की, लेकिन जैसा कि आप देख सकते हैं कि सामग्री पाद लेख के पीछे है।

HTML:

<main>
<header>
<ol>
<li>bar</li>
<li>foo</li>
</ol>
</header>
<section>
<div class="content"><div>
</section>
<footer></footer>
</main>

सीएसएस:

header {
background-color: #abc;
z-index: 1000;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}

html, body, main, section {
height: 100%;
display: block;
}

.content{
background-color: #000;
height: 100%;
}

footer {
background-color: #def;
bottom: 0;
display: block;
height: 54px;
position: absolute;
width: 100%;

}

क्या यह शुद्ध सीएसएस (3) के साथ संभव है?

jsfiddle

उत्तर:

उत्तर № 1 के लिए 1

यह एक बदसूरत समाधान का एक सा है, लेकिन अगर आप सामग्री-div के मार्जिन-टॉप को -54px के रूप में बनाते हैं और पैडिंग-टॉप: 54px के साथ इसके अंदर एक div जोड़ते हैं, तो यह अपेक्षित रूप से काम करता है।

HTML:

 <div class="content"><div class="contentwrapper"></div><div>

सीएसएस:

.contentwrapper {
padding-top:54px;
}
.content{
background-color: #000;
height: 100%;
margin-top:-54px;
}

बेला: http://jsfiddle.net/dohqn8m4/1/

उत्तर № 2 के लिए 1

यहाँ एक अलग दृष्टिकोण है:

HTML:

<header>
<ol>
<li>bar</li>
<li>foo</li>
</ol>
</header>
<main>
<section>
<div class="content"></div>
</section>

<div class="push"></div>
</main>
<footer></footer>

सीएसएस:

    html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
border: 0;
}

header {
background-color: #abc;
z-index: 1000;
position: fixed;
top: 0;
right: 0;
left: 0;
}

main {
min-height: 100%;
height: auto !important;
margin-bottom: -54px;
}

main > section{
padding-top: 72px;
}

.content {
background-color: #000;
}

.push {
height: 54px;
}

footer {
background-color: #def;
height: 54px;
}

अब पाद लेख हमेशा नीचे की ओर होता है जब तक कि छेद पृष्ठ पर सामग्री न भर जाए। उस स्थिति में "धक्का" तत्व पाद और सामग्री के अतिव्याप्ति से इनकार करने के लिए पर्याप्त स्थान प्रदान करता है।

आपकी सामग्री div को अब पेडिंग के माध्यम से पाद के नीचे रखा गया है। अनुपलब्ध सामग्री के कारण वास्तव में ऊंचाई 0 है। मेरे दृष्टिकोण में सामग्री div हमेशा सम्मिलित सामग्री को फिट करती है।

ध्यान रखें कि ए) आप उत्तरदायी उद्देश्य के लिएहेडर की ऊँचाई के बारे में जानना और मीडिया प्रश्नों का उपयोग करके अनुभाग की पैडिंग को समायोजित करना था ख) पाद के लिए समान। पुश तत्व की ऊंचाई को समायोजित करें और मार्जिन-नीचे मूल्य को समायोजित करें।

jsFiddle

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

स्थिति की कोशिश करो content पाद के ठीक ऊपर होना

bottom: <footer-height>;
position: absolute;

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

मैंने इसका उपयोग करके चिपचिपा पाद बनाया ट्यूटोरियल। मुझे लगता है कि यह प्रयोग करने में आसान और सुविधाजनक है।

सीएसएस कोड

html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}

HTML कोड

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>

डेमो URL

सामग्री div को शेष ऊंचाई भरें - सीएसएस, एचटीएमएल 5, सीएसएस 3

उत्तर:

संबंधित सवाल