पृष्ठ के नीचे div को संरेखित कैसे करें, स्क्रीन के नीचे नहीं

Question

मैं पृष्ठ के निचले हिस्से में एक div को संरेखित करना चाहता हूं, स्क्रीन के नीचे नहीं। जब मैं ऐसा करता हूं:

#contact-block{ 
position: absolute; 
    bottom: 0; left: 0; 
} 

, div स्क्रीन के निचले क्षेत्र में रखा गया है। जब मेरा पृष्ठ लंबा होता है, तो मुझे नीचे स्क्रॉल करना पड़ता है और div जो नीचे होना चाहिए था, बीच में कहीं भी तैरता है।

इस के लिए एक आसान समाधान हो सकता है, लेकिन मैं इसे देख नहीं रहा हूं।

यहाँ मेरी HTML है:

लाल div संपर्क div है:

<div id="left"> 
<div id="submenu"> <span class="menutitle">Services</span> 
    <ul> 
    </ul> 
</div> 

<div id="contact-block"> 
<span class="contacttitle">Contact</span></div> 
</div> 
<div id="content"> 
</div> 

मैं भी वर्णन करने के लिए मैं क्या मतलब है एक छोटे से छवि जोड़ दिया है।

संपादित करें: मुझे jQuery और CSS के साथ समाधान मिला है। यह सबसे अच्छा समाधान नहीं हो सकता है, लेकिन हे, यह काम करता है।

jQuery:

var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60; 
$("#contact-block").css("top", offset); 
$("#contact-block").css("left", $("#wrapper").position().left); 

सीएसएस:

#contact-block { 
position : absolute; 
width:216px; 
height:100px; 
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c; 
} 

Answer 1

अपने absolute तैनात तत्व की स्थिति को पहले पूर्वज तत्व है, जो static (जो डिफ़ॉल्ट है तैनात नहीं किया गया है पर निर्भर करता है इसलिए, आपको इसे relative (या absolute) पर स्पष्ट रूप से सेट करना होगा)।

तो, सुनिश्चित करें कि आपके संलग्न #left कंटेनर में 100% दस्तावेज़-हेगथ और position:relative है, और सब ठीक है।

Answer 2

आप बराबर ऊंचाई कॉलम देखना चाहते हैं: http://css-tricks.com/fluid-width-equal-height-columns/।

साधारण मामलों में यह पर्याप्त हो सकता है (मैं यह सोचते हैं कि आपके #left बाईं ओर स्तंभ तैरता और content स्तंभ सही तैरता और वहाँ कोई अन्य आवरण तत्व है, बस body):

body { 
    position:relative; 
} 

#contact-block { 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

के लिए मत भूलना अपने body के नीचे स्पष्ट तत्व <div style="clear:both"></div> जोड़ें।

Answer 3

आप अपने div एस को जगह में पूर्ण-स्थिति दे सकते हैं। इस तकनीक को #wrapper तत्व की आवश्यकता है, जिसे मैं प्रशंसक नहीं हूं, लेकिन हे, आपको देखना होगा।

इस उदाहरण में मैंने #leftdiv पूरी तरह से हटा दिया क्योंकि इसे केवल लेआउट के लिए आवश्यक था और अब आवश्यक नहीं है।

HTML:

<div id="wrapper"> 
    <div id="submenu">This is services</div> 
    <div id="contact-block">This is contact</div> 
    <div id="content">This is content</div> 
</div>​ 

सीएसएस:

#wrapper { 
    position: relative; 
    width: 960px; 
} 

#submenu { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 320px; 
    height: 320px; 
} 

#contact-block { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 320px; 
    height: 160px; 
} 

#content { 
    position: relative; 
    left: 320px; 
    right: 0; 
    top: 0; 
    width: 640px; 
    height: 640px; 
} 

//#content position is relative for the #wrapper to stretch. 
//The left property is equal to the width of the #submenu or #contact-block element 

इस तकनीक का एक अच्छा मुद्दा यह है कि यह आप क्लीनर एचटीएमएल देता है। मेरा मानना ​​है कि आवश्यकता होने पर आपके संस्करण का मोबाइल संस्करण बनाना आसान होगा।

The jsfiddle

अतिरिक्त सोचा: #wrapper तत्व आसानी से आप के पक्ष में body तत्व है, जो सिमेंटिक HTML की दिशा में एक बड़ा कदम है हटाया जा सकता है। Check this out!

Answer 4

मैं लाल div को सही लंबे div के अंदर और इसके अंत में डालने का सुझाव दूंगा। फिर position: relative और लाल div पर नकारात्मक बाएं मार्जिन का उपयोग बाईं ओर धक्का देने के लिए करें। इस तरह, जैसे आपका दायां div फैलता है, आपका लाल div हमेशा इसके नीचे रहता है।