css - কিভাবে আপনি একটি ওয়েব পৃষ্ঠার নীচে থাকতে পাদচরণ পেতে পারি?



html footer (16)

আমার একটি পাদচরণের সাথে একটি সহজ ২-কলাম লেআউট রয়েছে যা আমার মার্কআপের ডান এবং বাম ডিভিকে উভয়কে মুছে দেয়। আমার সমস্যা হল যে আমি সমস্ত ব্রাউজারে পৃষ্ঠার নীচে থাকার জন্য পাদচরণ পেতে পারি না। সামগ্রীটি যদি পাদচরণটিকে নিচে ধাক্কা দেয় তবে এটি কাজ করে তবে এটি সর্বদা ক্ষেত্রে নয়।

হালনাগাদ:

এটা ফায়ারফক্সে সঠিকভাবে কাজ করছে না। যখন পৃষ্ঠার পর্যাপ্ত সামগ্রী নেই ব্রাউজার উইন্ডোর নীচের অংশে পাদচরণটিকে ধাক্কা দেওয়ার জন্য আমি পৃষ্ঠার নীচের পটভূমি রঙটি দেখতে পাচ্ছি। দুর্ভাগ্যবশত, এই পৃষ্ঠার ডিফল্ট অবস্থা।

https://ffff65535.com


Flexbox সমাধান

ফ্লেক্স লেআউট প্রাকৃতিক শিরোনাম এবং ফুটার উচ্চতা জন্য পছন্দসই। এই ফ্লেক্স সমাধান আধুনিক ব্রাউজারে পরীক্ষা করা হয় এবং আসলে কাজ করে :) IE11।

জেএস ফীল্ড দেখুন

এইচটিএমএল

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

সিএসএস

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

display: flex সঙ্গে স্টিকি ফুট display: flex

সমাধান ফিলিপ ওয়ালটন এর স্টিকি পাদদেশ দ্বারা অনুপ্রাণিত।

ব্যাখ্যা

এই সমাধান শুধুমাত্র জন্য বৈধ :

  • ক্রোম ≥ 21.0
  • ফায়ারফক্স ≥ 20.0
  • ইন্টারনেট এক্সপ্লোরার ≥ 10
  • সাফারি ≥ 6.1

এটি flex ডিসপ্লে-এর উপর ভিত্তি করে, flex-grow প্রোপার্টিটি উত্তোলন করে, যা একটি উপাদানটি উচ্চতা বা প্রস্থে (যখন flow-direction ক্রম অনুসারে column বা row সেট হয়), পাত্রে অতিরিক্ত স্থান দখল করতে দেয় ।

আমরা 1vh ইউনিট লিভারেজ করতে যাচ্ছি, যেখানে 1 1vh হিসাবে সংজ্ঞায়িত করা হয়েছে :

ভিউপোর্টের উচ্চতা 1 / 100th

অতএব 100 100vh এর উচ্চতা পুরো ভিউপোর্টের উচ্চতাটি বিস্তৃত করার জন্য একটি উপাদান বলার সংক্ষিপ্ত উপায়।

আপনি কিভাবে আপনার ওয়েব পৃষ্ঠা গঠন করবে:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

পৃষ্ঠার নীচের অংশে ফুটার স্টিক করার জন্য, আপনি পৃষ্ঠার নীচের অংশে ফুটার ধাক্কা দেওয়ার জন্য শরীর এবং পাদচরণের মধ্যে যতটা বাড়তে চান তা বাড়তে চান।

অতএব আমাদের বিন্যাস হয়ে যায়:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

বাস্তবায়ন

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}
<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

আপনি JSFiddle এ এটি দিয়ে খেলতে পারেন।

সাফারি quirks

সচেতন থাকুন যে সাফারিটির flex-shrink সম্পত্তির ত্রুটিপূর্ণ বাস্তবায়ন রয়েছে , যা সামগ্রীগুলিকে প্রদর্শনের জন্য সর্বনিম্ন উচ্চতা তুলনায় আইটেমগুলিকে সঙ্কুচিত করতে দেয়। এই সমস্যাটি সমাধানের জন্য আপনাকে উপরের .content - .content সম্পত্তিটি .content এবং footer এ স্পষ্টভাবে 0 সেট করতে হবে।

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

আপনি position: absolute ব্যবহার করতে পারেন position: absolute পৃষ্ঠার নীচের অংশে ফুটার স্থাপন করার জন্য position: absolute অনুসরণ করুন, তবে নিশ্চিত করুন যে আপনার দুটি কলামগুলির উপযুক্ত margin-bottom যাতে তারা কখনও ফুটার দ্বারা বিভক্ত হয় না।

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

আমার জন্য এটি (পাদচরণ) প্রদর্শনের সবচেয়ে নিখুঁত উপায়টি নিচের দিকে আটকানো কিন্তু সর্বদা সামগ্রীকে ঢেকে রাখে না:

#my_footer {
    position: static
    fixed; bottom: 0
}

আমি একটি খুব সহজ লাইব্রেরি তৈরি করেছি https://github.com/ravinderpayal/FooterJS

এটা ব্যবহার খুব সহজ। লাইব্রেরি সহ, শুধু এই লাইন কোড কল।

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

বিভিন্ন পরামিতি / আইডি সঙ্গে ফাংশন প্রত্যাহার করে পাদদেশ গতিশীলভাবে পরিবর্তন করা যেতে পারে।

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

নোট: - আপনি কোন সিএসএস পরিবর্তন বা যোগ করতে হবে না। লাইব্রেরি গতিশীল যা বোঝায় যে পৃষ্ঠাটি লোড করার পরে স্ক্রীনটি পুনরায় আকারে থাকলেও এটি ফুটার অবস্থানটি পুনরায় সেট করবে। আমি এই লাইব্রেরিটি তৈরি করেছি, কারণ সিএসএস কিছু সময়ের জন্য সমস্যার সমাধান করে তবে ডেস্কটপ থেকে ট্যাবলেট বা বিপরীত দিক থেকে প্রদর্শনের আকার উল্লেখযোগ্যভাবে পরিবর্তিত হয়, তবে তারা সামগ্রীটি ওভারল্যাপ করে বা তারা আর স্টিকি থাকে না।

আরেকটি সমাধান হল সিএসএস মিডিয়া ক্যোয়ারী, তবে এই লাইব্রেরীটি স্বয়ংক্রিয়ভাবে এটির কাজ করে এবং আপনাকে সমস্ত মৌলিক জাভাস্ক্রিপ্ট সমর্থনকারী ব্রাউজার দ্বারা সমর্থিত হলে আপনাকে বিভিন্ন আকারের পর্দার জন্য বিভিন্ন CSS শৈলীগুলি ম্যানুয়ালি লিখতে হবে।

CSS সমাধান সম্পাদনা করুন :

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

এখন, যদি প্রদর্শনের উচ্চতা আপনার সামগ্রীর দৈর্ঘ্যের চেয়ে বেশি হয় তবে আমরা নীচে ফুটার সংশোধন করব এবং যদি না হয় তবে এটি স্বয়ংক্রিয়ভাবে প্রদর্শনের শেষে প্রদর্শিত হবে কারণ এটি দেখার জন্য আপনাকে স্ক্রোল করতে হবে।

এবং, এটি জাভাস্ক্রিপ্ট / লাইব্রেরির চেয়ে ভাল সমাধান বলে মনে হচ্ছে।


আমি কখনও কখনও এই সঙ্গে সংগ্রাম করেছি এবং আমি সর্বদা খুঁজে পেয়েছি যে সমস্ত divs সঙ্গে সমাধান একে অপরের মধ্যে একটি নোংরা সমাধান ছিল। আমি শুধু এটির সাথে কিছুটা বিরক্ত করেছি, এবং আমি ব্যক্তিগতভাবে এটি খুঁজে পেয়েছি যে এটি কাজ করে এবং এটি অবশ্যই সহজতম উপায়গুলির মধ্যে একটি:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

এই সম্পর্কে আমি কি পছন্দ করি যে কোন অতিরিক্ত HTML প্রয়োগ করা প্রয়োজন। আপনি কেবল এই সিএসএস যোগ করতে পারেন এবং তারপরেই আপনার HTML লিখতে পারেন


এই বিশুদ্ধ CSS সমাধানটি গতিশীলভাবে আকার পরিবর্তনকারী সামগ্রী (কমপক্ষে ফায়ারফক্স এবং সাফারি এ) সহ সঠিকভাবে কাজ করে না। উদাহরণস্বরূপ, যদি আপনার কন্টেইনার ডিভিতে একটি পটভূমি সেট থাকে, পৃষ্ঠাটি এবং তারপরে ডিভাইনের ভিতরে টেবিলটি (কয়েকটি সারি যোগ করা) আকার পরিবর্তন করে তবে টেবিলটি আড়ম্বরপূর্ণ এলাকার নিচের দিকে আটকাতে পারে, অর্থাৎ, আপনি কালো থিমটিতে সাদাতে অর্ধেক টেবিল থাকতে পারেন এবং অর্ধেক টেবিলটি সম্পূর্ণ সাদা হতে পারে কারণ ফন্ট-রঙ এবং ব্যাকগ্রাউন্ড রঙ উভয়ই সাদা। এটি মূলত পৃষ্ঠাগুলির সাথে অফলাইন।

নেস্টেড ডিভি মাল্টি-কলাম লেআউট একটি কুৎসিত হ্যাক এবং ফুটো স্টিক করার জন্য 100% মিনি-উচ্চতা শরীর / ধারক DIV একটি উপহাস হ্যাক।

আমি চেষ্টা করেছি এমন সব ব্রাউজারে কাজ করে এমন একমাত্র নন-স্ক্রিপ্ট সমাধান: থ্যাড (হেডারের জন্য) / টিফ্ট (ফুটারের জন্য) / টিবিডি (যে কোনও কলামের জন্য টিডি) এবং 100% উচ্চতা সহ অনেক সহজ / ছোট টেবিল। কিন্তু এই শব্দগত এবং এসইও অসুবিধা অনুভূত হয়েছে (tfoot আগে tob। প্রদর্শিত হবে। ARIA ভূমিকা যদিও শালীন সার্চ ইঞ্জিন সাহায্য করতে পারে)।



একটি স্টিকি পাদচরণ পেতে:

  1. আপনার কন্টেন্টের জন্য <div> class="wrapper"

  2. র্যাপারের শেষ </div> এর ঠিক আগে <div class="push"></div>

  3. র্যাপারের শেষ </div> এর পরে <div class="footer"></div>

* {
    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 */
}

একাধিক ব্যক্তি এই সাধারণ সমস্যাটির উত্তর এখানে দিয়েছেন, তবে আমার একটি জিনিস যোগ করার আছে, আমি যতটা হতাশ ছিলাম ততক্ষণ পর্যন্ত আমি মনে করলাম যে আমি কী ভুল করছিলাম।

যেমনটি করার সবচেয়ে সোজা উপায় উল্লেখ করা হয়েছে তেমনই ..

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

তবে পোস্টগুলিতে উল্লেখ করা সম্পত্তিটি সম্ভবত, এটি সাধারণত ডিফল্ট কারণ এটি অবস্থান: স্থায়ীভাবে শরীরের ট্যাগে। অবস্থান আপেক্ষিক কাজ করবে না!

আমার ওয়ার্ডপ্রেস থিম ডিফল্ট শরীরের প্রদর্শন overridden ছিল এবং এটি একটি অযৌক্তিকভাবে দীর্ঘ সময়ের জন্য বিভ্রান্ত।


নিচের অবস্থানগুলি ব্যবহার করে যেকোনো রেজোলিউশনে একটি স্টিকি ফুটার ডিভ তৈরি করতে পরম অবস্থান এবং z-index ব্যবহার করুন:

  • position: absolute; bottom: 0; সঙ্গে একটি পাদচরণ div তৈরি করুন position: absolute; bottom: 0; position: absolute; bottom: 0; এবং পছন্দসই উচ্চতা
  • কন্টেন্ট নীচে এবং উইন্ডো নীচে মধ্যে সাদা জায়গা যোগ করার জন্য পাদচরণ প্যাডিং সেট করুন
  • position: relative; min-height: 100%; সঙ্গে শরীরের কন্টেন্ট wraps যে একটি ধারক div তৈরি করুন position: relative; min-height: 100%; position: relative; min-height: 100%;
  • পাদচরণের উচ্চতা প্লাস প্যাডিং সমান যা প্রধান সামগ্রী div তে নিচের প্যাডিং যুক্ত করুন
  • পাদচরণ ক্লিপ করা হয় তাহলে ধারক div চেয়ে বৃহত্তর পাদচরণ এর z-index সেট করুন

এখানে একটি উদাহরণ:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>


ফ্লেক্স সমাধানগুলি আমার জন্য ফুটার স্টিকি তৈরি করার জন্য কাজ করে, কিন্তু দুর্ভাগ্যক্রমে শরীরের flex flex ব্যবহার করার জন্য আমাদের পৃষ্ঠার লেআউটগুলি পরিবর্তন করে এবং আরও ভাল করে না। অবশেষে আমার জন্য কাজ কি ছিল:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

আমি ctf0 এর প্রতিক্রিয়া থেকে এটি পেয়েছি https://css-tricks.com/couple-takes-sticky-footer/


যেহেতু Grid সমাধানটি এখনো উপস্থাপিত হয়নি, এখানে এটি মূল উপাদানটির জন্য কেবলমাত্র দুটি ঘোষণা দিয়ে, যদি আমরা height: 100% নিই height: 100% এবং margin: 0 প্রদত্ত জন্য:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>

আইটেম ক্রস অক্ষ বরাবর সারিবদ্ধ কন্টেইনার মধ্যে সমানভাবে বিতরণ করা হয়। সংলগ্ন আইটেম প্রতিটি জোড়া মধ্যে স্থান একই। প্রথম আইটেম প্রধান প্রান্ত প্রান্তের সাথে ফ্লাশ হয়, এবং শেষ আইটেমটি মূল প্রান্ত প্রান্তের সাথে ফ্লাশ হয়।


সিএসএস:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

এইচটিএমএল:

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

আপনি পৃষ্ঠার নীচে সংযুক্ত প্রতিক্রিয়াশীল পাদচরণ খুঁজছেন যা এই কৌশলটি চালা উচিত, যা সর্বদা ভিউপোর্টের উচ্চতার 80% এর শীর্ষ মার্জিন রাখে।


jQuery ক্রস ব্রাউজার কাস্টম প্লাগিন - $ .footerBottom ()

অথবা আমার মত jQuery ব্যবহার করুন, এবং আপনার পাদচরণের উচ্চতা auto বা fix করার fix সেট করুন, যাই হোক না কেন আপনি চান, এটি যেভাবেই কাজ করবে। এই প্লাগইনটি jQuery সিলেক্টর ব্যবহার করে যাতে এটি কাজ করে, আপনাকে আপনার ফাইলে jQuery লাইব্রেরি অন্তর্ভুক্ত করতে হবে।

এখানে আপনি কিভাবে প্লাগইন চালানো হয়। JQuery আমদানি, এই কাস্টম jQuery প্লাগইন কোড অনুলিপি করুন এবং jQuery আমদানি করার পরে এটি আমদানি! এটা খুব সহজ এবং মৌলিক, কিন্তু গুরুত্বপূর্ণ।

যখন আপনি এটি করেন, আপনাকে যা করতে হবে তা এই কোডটি চালানো হয়:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

ডকুমেন্ট প্রস্তুত ইভেন্টের ভিতরে এটি রাখা প্রয়োজন নেই। এটি ভাল হিসাবে চালানো হবে। পৃষ্ঠাটি লোড হয়ে গেলে এবং উইন্ডোটি পুনরায় আকারে নেওয়ার সময় এটি আপনার পাদচরণের অবস্থান পুনর্বিবেচনা করবে।

এখানে প্লাগিনের কোড যা বোঝার দরকার নেই। শুধু এটা বাস্তবায়ন কিভাবে জানি। এটা আপনার জন্য কাজ করে। তবে, যদি আপনি এটি কীভাবে কাজ করে তা জানতে চান, তবে কোডটি দেখুন। আমি আপনার জন্য মন্তব্য বাকি।

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>


@gcedo অনুরূপ সমাধান কিন্তু @gcedo নিচে ঠেলে দেওয়ার জন্য অন্তর্বর্তী সামগ্রী যোগ করার প্রয়োজন ব্যতীত। আমরা সহজেই margin-top:auto যুক্ত করতে পারি margin-top:auto পাদচরণে এবং margin-top:auto পৃষ্ঠায় তার উচ্চতা বা উচ্চতা সত্ত্বেও এটি পৃষ্ঠার নীচে push করা হবে।

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}
<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>





sticky-footer