741

निम्नलिखित HTML को देखते हुए:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

मैं #copyrightसबसे नीचे रहना चाहता हूं #container।

क्या मैं पूर्ण स्थिति का उपयोग किए बिना इसे प्राप्त कर सकता हूं? यदि फ्लोट संपत्ति ने 'नीचे' के मूल्य का समर्थन किया, तो ऐसा लगता है कि यह चाल चलेगा, लेकिन दुर्भाग्य से, यह नहीं करता है।

html css

— डोनल
स्रोत

211

यह स्थिति एक कारण है कि लेआउट टेबल अभी तक नहीं गए हैं। टेबल के साथ ऐसा करना सरल है और हर जगह काम करता है। CSS में ऐसा करना काफी मुश्किल है और क्रॉस-ब्राउज़र सपोर्ट ऐसा है। अकेले चलो कि यह याद रखना असंभव है कि यह कैसे करना है।

— तोमलक

मुझे सवाल समझ नहीं आ रहा है। आपको पूर्ण स्थिति का उपयोग करने की आवश्यकता क्यों है? क्या कन्टेनर में एक सेट ऊँचाई है, चाहे उसमें मौजूद सामग्री क्यों न हो?

— हार्टलेसान

921

शायद नहीं।

असाइन position:relativeकरने के लिए #container, और उसके बाद position:absolute; bottom:0;करने के लिए #copyright।

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

स्निपेट का विस्तार करें

— उपयोगकर्ता
स्रोत

10

यदि स्थिति: आपके कंटेनर के सापेक्ष आपके डिज़ाइन को तोड़ता है, तो याद रखें कि आप कंटेनर के अंदर 100% ऊँचाई के साथ एक रैपर div को शामिल कर सकते हैं, और स्थिति को जोड़ सकते हैं: बजाय इसके सापेक्ष।

— जैक शेफर्ड

और अगर यह तत्वों को दोहराने के लिए है, जो अन्यथा प्रत्येक अभिभावक के शीर्ष पर स्थित होगा?

— CRice

6

एक पूरी तरह से तैनात तत्व यह निकटतम माता-पिता की तलाश करता है जो कि स्थिति के निर्धारण के लिए पूर्ण या अपेक्षाकृत स्थिति है। यदि सभी विफल हो जाता है तो यह बॉडी (विंडो) को रीसेट करता है। इसलिए माता-पिता के सापेक्ष होने की आवश्यकता है।

— user17753

1

पेज कंटेंट पर कॉपीराइट को रोकने के लिए #container पर मार्जिन-बॉटम जोड़ें

— डॉक्टर कोडम

1

नीचे Flexbox दृष्टिकोण बहुत बेहतर है।

— वूहो

345

दरअसल, @User द्वारा स्वीकृत उत्तर केवल तभी काम करेगा जब विंडो लंबी हो और सामग्री कम हो। लेकिन यदि सामग्री लंबी है और विंडो छोटी है, तो यह कॉपीराइट जानकारी को पृष्ठ सामग्री पर रख देगा, और फिर सामग्री को देखने के लिए नीचे स्क्रॉल करके आपको एक अस्थायी कॉपीराइट नोटिस भेज देगा। यह इस समाधान को अधिकांश पृष्ठों (जैसे यह पृष्ठ, वास्तव में) के लिए बेकार बनाता है।

ऐसा करने का सबसे आम तरीका "सीएसएस स्टिकी फूटर" दृष्टिकोण है, या थोड़ा स्लिमर भिन्नता है। यह दृष्टिकोण महान काम करता है - यदि आपके पास एक निश्चित ऊंचाई पाद है।

यदि आपको एक चर ऊंचाई पाद की आवश्यकता है जो कि खिड़की के तल पर दिखाई देगी यदि सामग्री बहुत कम है, और सामग्री के तल पर यदि खिड़की बहुत कम है, तो आप क्या करते हैं?

अपने गौरव को निगलें और एक तालिका का उपयोग करें।

उदाहरण के लिए:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>

स्निपेट का विस्तार करें

कोशिश करके देखो। यह किसी भी विंडो आकार के लिए, किसी भी सामग्री के लिए, किसी भी आकार के पाद लेख के लिए, प्रत्येक ब्राउज़र पर ... यहां तक कि IE6 के लिए भी काम करेगा।

यदि आप लेआउट के लिए एक तालिका का उपयोग करने के बारे में सोच रहे हैं, तो अपने आप से यह पूछने के लिए एक दूसरा लें। सीएसएस को हमारे जीवन को आसान बनाना था - और यह समग्र है - लेकिन तथ्य यह है कि इन सभी वर्षों के बाद भी, यह अभी भी एक टूटी हुई, काउंटर-सहज ज्ञान युक्त गड़बड़ है। यह हर समस्या को हल नहीं कर सकता है। यह अधूरा है।

टेबल्स शांत नहीं हैं, लेकिन कम से कम अभी के लिए, वे कभी-कभी एक डिजाइन समस्या को हल करने का सबसे अच्छा तरीका हैं।

— रिक रेली
स्रोत

80

मुझे सबसे अच्छा जवाब लगता है। इसके अलावा, आप हमेशा html टेबल के बजाय "सीएसएस टेबल" (प्रदर्शन: टेबल [-रो / -सेल]) का उपयोग कर सकते हैं। यह शब्दार्थ के बिना एक ही लेआउट प्रदान करता है।

— चीकोडोरो

1

यदि आपके पास एक PHP स्क्रिप्ट / अन्य स्क्रिप्ट है जो आपके पृष्ठ को उत्पन्न करती है, तो आप अपने फ़ूटर को डुप्लिकेट कर सकते हैं, एक छिपे हुए "स्पेसर" के रूप में और एक बिल्कुल तैनात। स्पेसर पाद लेख यह सुनिश्चित करता है कि आपके पाद लेख में कितनी भी सामग्री हो, यह पृष्ठ पर नहीं जाएगा।

— टाइजॉइड

20

इन टिप्पणियों को पढ़ने वाले अन्य लोगों के लिए: इसका "गर्व" या "शांत" होने से कोई लेना-देना नहीं है। विशेष रूप से बड़ी मात्रा में सामग्री के लिए लेआउट के लिए तालिकाओं का उपयोग करना व्यावहारिक रूप से और भी अधिक दर्दनाक है। यह सुनिश्चित करना कि आप td को याद नहीं कर रहे हैं और सामग्री को जोड़ने पर यह बहुत अप्रासंगिक मार्कअप है। यह एक पीड़ा का कारण है कि हम HTML दस्तावेज़ों को केवल लेआउट नहीं बना रहे हैं , और यदि हमारे दस्तावेज़ की अधिकांश सामग्री सारणीबद्ध डेटा नहीं है, तो हम इसे तालिकाओं में क्यों डाल रहे हैं? यदि हम वेब तकनीकों का उपयोग करना पसंद नहीं करते हैं तो वे जिस तरह से थे, तो उनका उपयोग क्यों करें? इसके बजाय सामग्री प्रकाशित करने के लिए डेस्कटॉप / मोबाइल एप्लिकेशन का उपयोग करें

— gabe

1

@chiccodoro मैंने एक टेबल-कम समकक्ष लागू किया है जो आश्चर्यजनक रूप से न्यूनतम है, नीचे मेरे उत्तर की जांच करें

— हैशब्रोर्न

59

अभिमान अप्रासंगिक है। एक्सेसिबिलिटी कारणों से टेबल्स को लेआउट के लिए इस्तेमाल नहीं किया जाना चाहिए। यदि आपने कभी स्क्रीन रीडर का उपयोग किया है, तो आपको पता चल जाएगा कि तालिकाओं का उपयोग केवल सारणीबद्ध डेटा के लिए क्यों किया जाना चाहिए। @ टेसिककोडोरो राज्यों के रूप में सीएसएस तालिकाओं का उपयोग करें।

— मैट फेलो

170

Flexbox दृष्टिकोण!

में समर्थित ब्राउज़रों , आप निम्न का उपयोग कर सकते हैं:

यहाँ उदाहरण है

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

कोड स्निपेट दिखाएं

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

स्निपेट का विस्तार करें

उपरोक्त समाधान शायद अधिक लचीला है, हालांकि, यहां एक वैकल्पिक समाधान है:

यहाँ उदाहरण है

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

कोड स्निपेट दिखाएं

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

स्निपेट का विस्तार करें

एक साइड नोट के रूप में, आप अतिरिक्त समर्थन के लिए विक्रेता उपसर्ग जोड़ना चाह सकते हैं।

— जोश क्रोज़ियर
स्रोत

3

column-reverseमाता-पिता के बारे में कैसा है , इसलिए आपको बच्चे को कुछ भी जोड़ने की ज़रूरत नहीं है?

— मैक्स वाटरमैन

1

यह संभवतः स्वीकृत उत्तर होना चाहिए - कोई हैक्स नहीं, कोई पूर्ण स्थिति नहीं है, जरूरत पड़ने पर अतिप्रवाह सफाई से काम करता है (यह मेरे लिए था)।

— Adverbly

114

हाँ, आप इसे बिना absoluteस्थिति के और tableएस के उपयोग के बिना कर सकते हैं (जो मार्कअप और इस तरह के पेंच हैं)।

DEMO
यह IE> 7, क्रोम, एफएफ पर काम करने के लिए परीक्षण किया गया है और आपके मौजूदा लेआउट में जोड़ने के लिए एक बहुत आसान चीज है।

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

यह प्रभावी रूप से क्या करता है float:bottom, यहां तक कि इस मुद्दे के लिए लेखांकन @ रेकी के जवाब में बताया गया है!

— हैश ब्राउन
स्रोत

1

अच्छा! बस एक नोट, IIRC आपको <!DOCTYPE>IE (<= 8 कम से कम) पर काम करने के लिए सेट की आवश्यकता है ; वे पुराने संस्करण केवल display:table-XXX"मानकों" मोड में समर्थन करते हैं । IE6 कहते हैं, लेकिन मानक मोड बहुत सारे पृष्ठों को तोड़ देगा, जिनके लिए डिज़ाइन किया गया था।

— डेविड

3

आप flexbox का उपयोग भी कर सकते हैं - stackoverflow.com/questions/526035/…

— जोश

2

मुझे किस्मत का साथ ज्यादा मिला .foot{display: table-footer-group}। मैं जरूरत नहीं थी vertical-align, heightया border-collapse।

— जैकब वेलेंटा

क्या यह कार्य #containerकेवल समाहित है #footऔर कोई अन्य सामग्री नहीं है?

— सोलेस

ऐसा लगता है कि इसे कम से कम एक गैर-ब्रेकिंग स्पेस की आवश्यकता होगी , @ शोले

— हैशब्रोवन

20

यह एक पुराना सवाल है, लेकिन यह एक अनूठा तरीका है जो कई मामलों में मदद कर सकता है।

शुद्ध सीएसएस, पूर्ण स्थिति के बिना, किसी भी ऊंचाई को ठीक किए बिना, क्रॉस-ब्राउज़र (IE9 +)

उस वर्किंग फिडेल को देखें

क्योंकि सामान्य प्रवाह 'टॉप-टू-बॉटम' है, हम #copyrightकिसी भी प्रकार की स्थिति के बिना बस अपने माता-पिता के निचले हिस्से से चिपके रहने के लिए डिव से नहीं पूछ सकते हैं , लेकिन अगर हम चाहते थे कि #copyrightडिव अपने माता-पिता के ऊपर चिपके रहें, तो यह बहुत सरल होगा - क्योंकि यह सामान्य प्रवाह तरीका है।

इसलिए हम अपने फायदे में इसका इस्तेमाल करेंगे। हम divHTML में s के क्रम को बदल देंगे , अब #copyrightdiv शीर्ष पर है, और सामग्री अभी इसका अनुसरण करती है। हम सामग्री को पूरे रास्ते में फैलाते हैं (छद्म तत्वों और क्लियरिंग तकनीकों का उपयोग करके)

अब यह केवल उस inverting का मामला है जो दृश्य में वापस आ जाता है। जिसे सीएसएस ट्रांसफॉर्म के साथ आसानी से किया जा सकता है।

हम कंटेनर को 180 डिग्री से घुमाते हैं, और अब: ऊपर-नीचे है। (और हम फिर से सामान्य दिखने के लिए सामग्री को उलटा कर देते हैं)

यदि हम सामग्री क्षेत्र के भीतर एक स्क्रोलरबार रखना चाहते हैं, तो हमें सीएसएस मैजिक के थोड़ा अधिक लागू करने की आवश्यकता है। जैसा कि यहां दिखाया जा सकता है [उस उदाहरण में, सामग्री हेडर से नीचे है - लेकिन इसका एक ही विचार]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

स्निपेट का विस्तार करें

— avrahamcool
स्रोत

2

कृपया नहीं, देखो कितना भयानक है अब i.stack.imgur.com/ZP9Hw.png

— grg

7

divउपरोक्त तत्वों के लिए एक और कंटेनर बनाएं #copyright। कॉपीराइट के ठीक ऊपर एक नया जोड़ें div: <div style="clear:both;"></div> यह पादरी को हर चीज के अधीन होने के लिए बाध्य करेगा , ठीक उसी तरह जैसे कि सापेक्ष स्थिति ( bottom:0px;) का उपयोग करने के मामले में ।

— रापली आन्द्रे
स्रोत

7

इसे इस्तेमाल करे;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

— गैरी ग्रीन
स्रोत

1

@Feelsbadman कृपया अन्य लोगों के कोड को इस तरह से उत्तर में न बदलें। यदि आप HTML से सीएसएस को अलग करने का इरादा कर रहे थे, तो कृपया ध्यान दें कि आपने अनजाने में कोड को किसी और चीज़ में बदल दिया है, संभवत: उत्तर को उलझाते हुए और निश्चित रूप से पोस्टर के इरादे को बदल रहा है।

— टाइलर

6

जबकि यहाँ प्रदान किए गए किसी भी उत्तर को मेरे विशेष मामले में लागू या काम नहीं किया गया था, मुझे इस लेख के बारे में पता चला, जो इस स्वच्छ समाधान को प्रदान करता है:

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

मुझे यह पता चलता है कि किसी वेबसाइट के सभी HTML कोड को फिर से सेट किए बिना मोबाइल डिस्प्ले के लिए उत्तरदायी डिज़ाइन लागू करने के लिए यह बहुत उपयोगी है body।

ध्यान दें कि केवल पहले table-footer-groupया table-header-groupइसे इस तरह से प्रस्तुत किया जाएगा: यदि एक से अधिक हैं, तो अन्य के रूप में प्रदान किया जाएगा table-row-group।

— स्किप्पि ले ग्रैंड गौरौ
स्रोत

6

सीएसएस ग्रिड

चूंकि सीएसएस ग्रिड का उपयोग बढ़ रहा है, इसलिए मैं align-selfउस तत्व को सुझाना चाहूंगा जो ग्रिड कंटेनर के अंदर है।

align-selfमूल्यों में से कुछ भी कर सकते हैं: end, self-end, flex-endनिम्न उदाहरण के लिए।

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>

स्निपेट का विस्तार करें

— मनोज कुमार
स्रोत

5

आप वास्तव में कर सकते हैं alignकरने के लिए बॉक्स bottomका उपयोग किए बिना position:absoluteअगर आप जानते हैं heightकी #containerका उपयोग कर पाठ संरेखण की सुविधा inline-blockतत्वों।

यहां आप इसे एक्शन में देख सकते हैं।

यह कोड है:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

— jacmkno
स्रोत

5

अनुवाद और शीर्ष संपत्ति का उपयोग करना

बस तत्व बच्चे को स्थिति के लिए सेट करें: रिश्तेदार और इसे ऊपर ले जाने के लिए: 100% (जो कि माता-पिता की 100% ऊंचाई है) और रूपांतरण द्वारा माता-पिता के नीचे से चिपकाएं: TranslY (-100%) (वह -100% की ऊंचाई बच्चा)।

लाभ

आप पृष्ठ प्रवाह से तत्व नहीं लेते हैं
यह गतिशील है

लेकिन अभी भी सिर्फ वर्कअराउंड :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

पुराने ब्राउज़र के लिए उपसर्ग न भूलें।

— Samuell
स्रोत

4

यहाँ पर CodePen लिंक दें ।

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}

<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

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

स्निपेट का विस्तार करें

— azizarslan
स्रोत

3

यदि आप कंटेनर की ऊंचाई की परवाह किए बिना इसे नीचे "छड़ी" करना चाहते हैं, तो पूर्ण स्थिति जाने का रास्ता है। बेशक, यदि कॉपीराइट तत्व कंटेनर में अंतिम है, तो यह हमेशा सबसे नीचे होगा।

क्या आप अपने प्रश्न पर विस्तार कर सकते हैं? स्पष्ट रूप से बताएं कि आप क्या करने की कोशिश कर रहे हैं (और आप पूर्ण स्थिति का उपयोग क्यों नहीं करना चाहते हैं)?

— जैक स्लीट
स्रोत

2

इसके अलावा, यदि उपयोग करने के साथ position:absolute;या position:relative;, आप हमेशा padding माता div - पिता की कोशिश कर सकते हैं या डाल सकते हैं margin-top:x;। ज्यादातर मामलों में बहुत अच्छी विधि नहीं है, लेकिन यह कुछ मामलों में काम आ सकता है।

— भूत इको
स्रोत

1

हो सकता है कि यह किसी की मदद करता है: आप हमेशा div को दूसरे div के बाहर रख सकते हैं और फिर इसे नकारात्मक मार्जिन का उपयोग करके ऊपर की ओर धकेल सकते हैं:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

— DesignConsult
स्रोत

1

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

स्निपेट का विस्तार करें

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

स्निपेट का विस्तार करें

— अनमोल रतन मोहला
स्रोत

1

तल पर चिपचिपा पाद लेख के लिए "स्थिति: निरपेक्ष" का उपयोग न करें। तो आप इस तरह से कर सकते हैं:

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }

<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

स्निपेट का विस्तार करें

— निलेश पवार
स्रोत

हाय निलेश; यह समाधान पहले से ही कई उत्तरों में प्रदान किया गया है। कृपया यह सुनिश्चित करने के लिए कि प्रश्न का कोई दोहराव नहीं है, एक नया प्रदान करने से पहले एक प्रश्न के सभी मौजूदा उत्तरों को पढ़ना सुनिश्चित करें!

— टायलरएच

1

यदि आप बाल ब्लॉक की ऊंचाई नहीं जानते हैं:

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

स्निपेट का विस्तार करें

http://jsbin.com/ULUXIFon/3/edit

यदि आप जानते हैं कि चाइल्ड ब्लॉक की ऊंचाई चाइल्ड ब्लॉक को जोड़ती है तो पैडिंग-टॉप / मार्जिन-टॉप जोड़ें:

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

स्निपेट का विस्तार करें

— zloctb
स्रोत

0

सिर्फ इसलिए कि इसका उल्लेख बिल्कुल नहीं किया गया है, आमतौर पर आपकी जैसी स्थितियों में क्या अच्छा काम करता है:

कंटेनर-डिव के बाद कॉपीराइट-डिव की जगह

आपको केवल अन्य कंटेनर (उसी समग्र चौड़ाई, केंद्र आदि) के समान कॉपीराइट-डिव को प्रारूपित करना होगा, और सब ठीक है।

सीएसएस:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

केवल यही समय आदर्श नहीं हो सकता है जब आपके कंटेनर-डिव के साथ घोषित किया जाता है height:100%, और उपयोगकर्ता को कॉपीराइट देखने के लिए नीचे स्क्रॉल करना होगा। लेकिन फिर भी आप काम कर सकते हैं (जैसे margin-top:-20px- जब आपके कॉपीराइट तत्व की ऊंचाई 20px है)।

कोई पूर्ण स्थिति नहीं
कोई तालिका लेआउट नहीं
कोई पागल सीएसएस, जो हर दूसरे ब्राउज़र में अलग दिखता है (अच्छी तरह से IE कम से कम, आप जानते हैं)
सरल और स्पष्ट स्वरूपण

एक तरफ: मुझे पता है कि ओपी ने एक समाधान के लिए कहा था कि "... 'कंटेनर' div के नीचे चिपक जाता है ..." , और इसके तहत कुछ नहीं, लेकिन चलो, लोग यहां अच्छे समाधान की तलाश कर रहे हैं, और यह एक है!

— लेवीय
स्रोत

ओपी के मामले में, यह समाधान केवल तभी अच्छा होता है जब #copyright स्थिर-ऊंचाई (तब आप सेट कर सकते हैं margin-top: -{element height}।

— गजस

@ गजस: यह निरपेक्ष नहीं है और न ही निश्चित स्थिति है। यह वही करता है जो ओपी चाहता है (कॉपीराइट-ऊंचाई की कोई बात नहीं), एकमात्र अपवाद के साथ कि कॉपीराइट-डिव पहले कंटेनर में नहीं है। ओपी ने कंटेनर के तल पर छड़ी करने के लिए कॉपीराइट के लिए कहा, पृष्ठ नहीं !!

— लेविट

क्षमा करें, मेरा मतलब यह नहीं है कि # कंटेनर का कंटेनर ऊंचाई तय है।

— गजस

जब तक मैं खुद को गलत नहीं समझती , ओपी को हल करने की कोशिश कर रहा असली मुद्दा तत्व के नीचे है जब तत्व की ऊंचाई दूसरे तत्व द्वारा निर्धारित की जाती है, उदाहरण के लिए टिप्पणियों के साथ jsbin.com/acoVevI/3 । यहाँ आप केवल कंटेनर के बाहर बटन नहीं लगा सकते । समस्या को और स्पष्ट करने के लिए jsbin.com/acoVevI/4 देखें ।

— गजस

ओपी ने कहा: "मैं # कॉन्ट्राइज़र को # कॉन्टेनर के निचले हिस्से पर चिपकाना चाहूंगा।", इसलिए यह सवाल से पूरी तरह से स्पष्ट नहीं है। इसके अलावा यह किसी भी मामले के लिए एक वैध उदाहरण है जहां इसे "#container के निचले भाग में रहना चाहिए"। यह समाधान सहायक होना चाहिए, एक स्वच्छ दृष्टिकोण है और कई लेआउट के लिए अच्छी तरह से काम करता है। जैसे स्क्रॉल सामग्री के साथ कोई भी पृष्ठ, जैसे stackoverflow.com ;-)

— लेविट

0

यहां एक तत्व है जो एक ज्ञात ऊंचाई और चौड़ाई के साथ एक तत्व बनाने के लिए लक्षित है (कम से कम लगभग) दाईं ओर तैरता है और सबसे नीचे रहता है, जबकि अन्य तत्वों के लिए एक इनलाइन तत्व के रूप में व्यवहार करता है। यह नीचे-दाएं पर केंद्रित है क्योंकि आप इसे अन्य तरीकों के माध्यम से किसी भी कोने में आसानी से रख सकते हैं।

मुझे एक नेविगेशन बार बनाने की आवश्यकता थी, जिसमें नीचे दाईं ओर वास्तविक लिंक हों, और यादृच्छिक भाई-बहन तत्व हों, जबकि यह सुनिश्चित करना कि बार स्वयं लेआउट को बाधित किए बिना, ठीक से फैला हुआ है। मैंने नेविगेशन बार के लिंक के स्थान पर कब्जा करने के लिए "छाया" तत्व का उपयोग किया और कंटेनर के बच्चे के नोड्स के अंत में इसे जोड़ा।

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

— Zyox
स्रोत

0

float:bottomCSS में कुछ भी नहीं है । सबसे अच्छा तरीका ऐसे मामलों में स्थिति का उपयोग कर रहा है:

position:absolute;
bottom:0;

— तौहीद रहमान
स्रोत

कृपया अपना उत्तर बताएं।

— मोहित राज पुरोहित

0

के लिए उन केवल कंटेनर में एक बच्चा है, तो आप उपयोग कर सकते हैं table-cellऔर vertical-alignदृष्टिकोण है जो अपनी मूल के तल पर एक भी div स्थिति के लिए मज़बूती से काम किया।

ध्यान दें कि table-footer-groupअन्य उत्तरों के रूप में उपयोग करने से माता-पिता की ऊंचाई की गणना टूट जाएगी table।

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}

<div id="container">
    <div id="item">Single bottom item</div>
</div>

स्निपेट का विस्तार करें

— ह झांग
स्रोत

0

के अनुसार: w3schools.com

स्थिति वाला एक तत्व: पूर्ण; निकटतम स्थित पूर्वज के सापेक्ष तैनात किया गया है (निर्धारित की तरह व्यूपोर्ट के सापेक्ष तैनात करने के बजाय)।

तो आपको मूल तत्व को किसी रिश्तेदार या निरपेक्ष आदि के साथ रखने की आवश्यकता है और वांछित तत्व को पूर्ण और बाद वाले सेट के नीचे 0 पर रखें।

— जोनास फ्रायर
स्रोत

यह पहले से ही स्वीकृत उत्तर (दूसरों के बीच) में उल्लिखित है।

— टायलरएच

-1

स्टाइल ऑफ डिवा, position:absolute;bottom:5px;width:100%;काम कर रही है, लेकिन इसके लिए अधिक स्क्रॉलअप स्थिति की आवश्यकता थी।

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

— nicejay
स्रोत

मैं अपने कंटेनर के निचले भाग में अपनी स्थिति कैसे बना सकता हूं?

Flexbox दृष्टिकोण!

शुद्ध सीएसएस, पूर्ण स्थिति के बिना, किसी भी ऊंचाई को ठीक किए बिना, क्रॉस-ब्राउज़र (IE9 +)

सीएसएस ग्रिड

अनुवाद और शीर्ष संपत्ति का उपयोग करना