मैं अपने कॉलम को हमेशा पृष्ठ के नीचे तक फैलाने के लिए कैसे मजबूर करूं?

मुझे पृष्ठ के निचले भाग में विस्तार करने के लिए मेरे सामग्री कॉलम की आवश्यकता है जब सामग्री व्यूपोर्ट से कम हो, लेकिन सामग्री अब लंबी होने पर भी विस्तारित हो। कॉलम को पृष्ठ के शीर्ष से थोड़ा तरीके नीचे आना होगा।मैं अपने कॉलम को हमेशा पृष्ठ के नीचे तक फैलाने के लिए कैसे मजबूर करूं?

यहाँ मैं क्या वर्णित के लिए HTML है:

<html> 
    <body> 
    <div id="content"> 
     <p> asdf ghjkl </p> 
    </div> 
    </body> 
</html>

यहाँ सीएसएस है

#content { 
    min-height: 100%; 
    margin: 100px 0 0; 
}

इस विधि के साथ इस मुद्दे को यह है कि min-height: 100%; खाते में गद्दी नहीं ले करता है तो पेज है मैं जो चाहता हूं उससे हमेशा बड़ा होता हूं। है वहाँ जावास्क्रिप्ट का उपयोग किए बिना यह पूरा करने के लिए किसी भी तरह

desiredbehavior

यह व्यवहार मैं मांग कर रहा है?

स्रोत

2011-09-17 enthdegree

मेरे पास http://nerdhow.net/ पर एक लाइव उदाहरण है (यह फ्रंट पेज है) '# contentcolumn'' # wrapper' और '.region-content' से संबंधित है # सामग्री ' – enthdegree

मैं एक जोड़ दूंगा बेहतर चित्रण करने के लिए छवि जो मैं चाहता हूं। – enthdegree

क्या आपने न्यूनतम ऊंचाई का उपयोग करने पर विचार किया है? यह आपको सामग्री div की न्यूनतम ऊंचाई सेट करने की अनुमति देगा, भले ही इसमें कौन सी सामग्री है। इसके बाद यह आपकी आवश्यकताओं के अनुरूप होगा। – Paragon

इस जेएसफ़ाइल को आजमाएं: http://jsfiddle.net/8R4yN/। ऐसा लगता है कि आप जिस तरह से काम करना चाहते हैं। मैंने कुछ सुझाव दिए: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/। ऐसा लगता है कि overflow छिपाने का कारण बन रहा है, और #content अंदर भी मदद नहीं कर रहा है :)।

स्रोत

2011-09-17 01:48:29

पूर्ण स्थिति आपके लिए यह कार्य कर सकते हैं:

पहले हटाने के अपने min-height और margin फिर अपने सीएसएस करने के लिए इस नियम लागू होते हैं।

#content { 
    position: absolute; 
    top: 100px; 
    bottom: 0; 
}

स्रोत

2011-09-17 02:37:46

आप पूर्ण स्थिति निर्धारण का उपयोग करते हुए और अतिरिक्त ब्लॉक जोड़ने (यदि आप आप स्तंभ के अंतर्गत एक ठोस पृष्ठभूमि की जरूरत है) द्वारा इसे प्राप्त कर सकते हैं।

तो, आप एक छोटे से सामग्री होगा जब, आप http://jsfiddle.net/kizu/7de7m/
मिल जाएगा और अगर आप सामग्री का एक बहुत होगा, आप मिल जाएगा http://jsfiddle.net/kizu/7de7m/3/

स्रोत

2011-09-17 11:11:24 kizu

CSS3 में, आप border-box को box-sizing

उपयोग कर सकते हैं यह निर्धारित करने से, आप के बजाय निर्दिष्ट चौड़ाई और ऊंचाई के साथ बॉक्स दिखाई दे ब्राउज़र मजबूर कर सकते हैं, और सीमा और गद्दी जोड़ने बॉक्स के अंदर।

स्रोत

2011-09-17 11:31:16 user123444555621

धन्यवाद! मुझे इसके बारे में पता नहीं था और इससे मुझे समस्या हल करने में मदद मिली। – enthdegree

ठीक ब्लॉक्स और पक्षियों, यहां मैं क्या कर रहा हूं। सीधे समस्या को हल करने के बजाय, मैंने कुछ फिक्सर divs जोड़े।

सबसे पहले, यहाँ कुछ टिप्पणियों हैं:

हम जानते हैं कि जब #column व्यूपोर्ट से अधिक लंबी है, #column जरूरतों की लंबाई <body> की ऊंचाई निर्दिष्ट करने के लिए।
तो #column व्यूपोर्ट तुलना में कम है, व्यूपोर्ट की ऊंचाई <body> की ऊँचाई निर्दिष्ट करने की जरूरत है।
कॉलम को सभी परिस्थितियों में पृष्ठ के नीचे तक पहुंचने की आवश्यकता है, भले ही यह कितनी देर तक सामग्री हो।

पहला मापदंड हम यह सुनिश्चित करें कि height: auto <body> पर सेट किया जाता है बनाने की जरूरत है के लिए

। Height अगर यह सेट नहीं है तो इसे डिफॉल्ट करें। हमें यह सुनिश्चित करने की भी आवश्यकता है कि #column में height: auto; और overflow: hidden; है ताकि यह इसकी सामग्री के आकार में विस्तार कर सके।

दूसरे मानदंडों के लिए हमें position: absolute; और min-height: 100%;<body> पर सेट करने की आवश्यकता है। अब <body> की लंबाई विस्तारित होगी जब #column इससे अधिक लंबा है, लेकिन व्यूपोर्ट से कम नहीं होगा। यह अगला भाग है जहां फिक्स आता है।

तीसरे मानदंडों के लिए, चाल कुछ अतिरिक्त divs जोड़ने और उन्हें कुछ विशेष सीएसएस देना है। मेरे एचटीएमएल में मैंने दो divs को #column के बाहर जोड़ा।

<div id="colhack-outer"> 
    <div id="colhack-inner"> 
    </div> 
</div> 
<div id="column"> 
    ... 
</div>

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

#colhack-outer { 
    height: 100%; 
    padding: <where you want to shift the column to>; 
    position: absolute; 
    width: 50%; 
} 
#colhack-inner { 
    height: 100%; 
    width: 100%; 
    background-color: #303030; 
}

आप भी अपने वास्तविक सामग्री कंटेनर का उपयोग कि विशेष बॉक्स मॉडल बनाने के लिए और यह गद्दी के साथ भी शिफ्ट करने के लिए है:

#contentbox { 
    position: relative; 
    padding: <where you want to shift the column to>; 
    width: 50%; 
    color: #EEEEEC; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

लाइव उदाहरण यहाँ: http://nerdhow.net/

यहाँ सीएसएस मैं उन्हें करने के लिए लागू है

यदि आपके कोई प्रश्न हैं या कुछ स्पष्ट नहीं है तो कोई टिप्पणी पोस्ट करें।

स्रोत

2011-09-18 03:24:48 enthdegree

धन्यवाद ... आंतरिक div पर पृष्ठभूमि को सेट करने से मुझे एक समस्या ठीक हो गई थी – Martin

मैं अपने कॉलम को हमेशा पृष्ठ के नीचे तक फैलाने के लिए कैसे मजबूर करूं?

उत्तर

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