सीएसएस: नीचे और केंद्रित करने के लिए तय किया गया

Question

मुझे पृष्ठ के निचले भाग में तय करने और इसे केंद्रित करने के लिए मेरे पाद की आवश्यकता है। पाद लेख की सामग्री हर समय बदल सकती है, इसलिए मैं इसे केवल मार्जिन-वाम के माध्यम से केंद्र नहीं कर सकता: xxpx; मार्जिन-राइट: xxpx;

समस्या यह है कि किसी कारण से यह काम नहीं करता है:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

मैंने वेब को क्रॉल किया और कुछ भी नहीं पाया। मैंने एक कंटेनर डिवा और नाडा बनाने की कोशिश की। मैंने अन्य संयोजनों और पूर्णताओं की कोशिश की। मैं यह कैसे कर सकता हूं?

धन्यवाद

Comments

क्या यह केंद्रित नहीं हो रहा है? या पृष्ठ के नीचे स्थित नहीं किया जा रहा है? अथवा दोनों?

— ब्रेत्स्केली

मैं एक को दूसरे के बिना नहीं कर सकता। यदि दोनों नियम लिखे जाते हैं तो यह नीचे से बायीं ओर चिपका रहेगा।

— CamelCamelCamel

मुझे पता है कि यह एक पुरानी पोस्ट है। लेकिन ऐसा करने का एक बेहतर तरीका है। बस शरीर के साथ position:relativeऔर paddingपाद का आकार + सामग्री और इच्छित पाद लेख के बीच का स्थान बनाएँ । उसके बाद केवल कोई साथ एक पाद लेख div बनाने absoluteऔर bottom:0। डायनामाइट भड़ाम से फटता है।

— thePrimeagen

मैं आमतौर पर इसके लिए कंपास का इस्तेमाल करता हूं।

— CamelCamelCamel

@ मिचेल, आपकी टिप्पणी का उत्तर होना चाहिए। काश मैंने इसे जल्दी ही देख लिया होता।

— lmsurprenant

Answer 1

आप इस तरह के रूप में एक चिपचिपा पाद समाधान का उपयोग करना चाहिए:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

ऐसे ही कुछ और भी हैं;

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

HTML के साथ:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

Comments

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

— jrista

Answer 2

डैनियल कनीस द्वारा संशोधित कोड :

बस सीएसएस में निम्नलिखित लाइनें बदलें

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

और HTML में:

<p class="enclose problem">
Your footer text here.
</p>

Comments

नीचे: 0 सभी मुझे चाहिए

— danday74

Answer 3

एक jQuery समाधान

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

कभी-कभी जेएस को लागू करने के लिए पुराने सीएसएस को हैक करना आसान होता है।

http://jsfiddle.net/gLhEZ/

Answer 4

समस्या में निहित है position: static। स्थैतिक का अर्थ है स्थिति के साथ बिल्कुल भी न करना। position: absoluteतुम क्या चाहते हो तत्व को केंद्रित करना हालांकि अभी भी मुश्किल है। निम्नलिखित काम करना चाहिए:

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

या

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

लेकिन मैं पहली विधि की सलाह देता हूं। मैंने इस उत्तर से तकनीक का उपयोग किया: कैसे div में बिल्कुल तैनात तत्व को केंद्र में रखा जाए?

Answer 5

मेरे द्वारा देखे जाने वाले 2 संभावित मुद्दे हैं:

1 - IE को स्थिति से परेशानी हुई है: अतीत में तय की गई। यदि आप IE7 + एक वैध सिद्धांत या गैर-IE ब्राउज़र के साथ उपयोग कर रहे हैं तो यह समस्या का हिस्सा नहीं है

2 - आपको पाद लेख के लिए एक चौड़ाई निर्दिष्ट करने की आवश्यकता है यदि आप चाहते हैं कि पाद लेख केंद्रित हो। अन्यथा यह पृष्ठ की पूर्ण चौड़ाई और बाएं और दाएं के लिए ऑटो मार्जिन को डिफॉल्ट करता है। 0. यदि आप चाहते हैं कि फूटर बार चौड़ाई को ले जाए (जैसे स्टैकऑवरफ्लो नोटिस बार) और टेक्स्ट को केंद्र में रखें, तो आपको आवश्यकता होगी अपनी परिभाषा में "पाठ-संरेखित करें: केंद्र" जोड़ने के लिए।

Answer 6

मैंने div प्रॉब्लम डिव इन अ डिव दि डिव ’एनकाउंटर किया है, जो इस डिव को एनक्लोव डिव कहता है ... सीएसएस में एनक्लोज डिव को १००% की चौड़ाई दें और ० के नीचे के साथ तय किया गया पोशन ... फिर प्रॉब्लम डिव में डालें एन्कोस div यह कैसे दिखेगा

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

फिर html में ...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

बिलकुल!
- हाइपरटेक्स्टी

Answer 7

@ मिचेल की टिप्पणी के आधार पर:

ऐसा करने का एक बेहतर तरीका है। बस शरीर को स्थिति के साथ बनाएं: रिश्तेदार और पाद का आकार पैडिंग + सामग्री और इच्छित पाद लेख के बीच का स्थान। फिर बस एक पूर्ण और नीचे के साथ एक पाद लेख div: 0।

मैं स्पष्टीकरण के लिए खुदाई करने गया और यह इस पर उबलता है:

• डिफ़ॉल्ट रूप से, नीचे की पूर्ण स्थिति: 0px इसे खिड़की के नीचे सेट करता है ... पृष्ठ के नीचे नहीं।
• सापेक्ष स्थिति एक तत्व अपने बच्चों की पूर्ण स्थिति के दायरे को हल करता है ... इसलिए शरीर को सापेक्ष स्थिति में स्थापित करके, नीचे की पूर्ण स्थिति: 0px अब वास्तव में पृष्ठ के निचले हिस्से को दर्शाता है।

Http://css-tricks.com/absolute-positioning-inside-relative-positioning/ पर अधिक जानकारी

Answer 8

यहाँ css ग्रिड का उपयोग करके एक उदाहरण दिया गया है।

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

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

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>

आप सीएसएस ग्रिड का उपयोग कर सकते हैं: एक ठोस उदाहरण

Answer 9

मैं एक समस्या में भाग गया, जहाँ ठेठ position: fixedऔर bottom: 0काम नहीं किया। के साथ एक स्वच्छ कार्यक्षमता की खोज की position: sticky। ध्यान दें कि यह "अपेक्षाकृत" नया है इसलिए यह IE / एज 15 और पहले के साथ नहीं होगा।

यहाँ w3schools के लिए एक उदाहरण है।

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 30px;
  font-size: 20px;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

</body>
</html>