পৃষ্ঠার নীচে ফ্ল্যাশিং পাদচরণ, টুইটার বুটস্ট্র্যাপ

Question

আমি সিএসএস ব্যবহার করে ফুটার ফ্লাশ করার কৌশলটির সাথে সাধারণত পরিচিত।

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

Comments

পরীক্ষার আগে নীচের সমস্ত উত্তর মনে রাখবেন ওপি এটি টুইটার বুটস্ট্র্যাপের সাথে কাজ করতে চায় Aযেমন এটি আবশ্যক নয়, টুইটার বুটস্ট্র্যাপ জ্যাকুরির সাথে কাজ করে, যার অর্থ এটি জাভাস্ক্রিপ্ট সক্ষম হয়েছে that এজন্য কেবল আমার উত্তরটি পরীক্ষা করুন: stackoverflow.com / প্রশ্নগুলি / 10099422 /…

— হেনরিডাব্লু

অফিসিয়াল উদাহরণ: getbootstrap.com/example/sticky-footer-navbar/…

— ব্যবহারকারী

লিংক ভেঙে গেছে! কেউ দয়া করে সরকারী উদাহরণের লিঙ্কটি ঠিক করতে পারেন?

— প্যাশনআইনফিনিট

@ অনুগ্রহকালীন getbootstrap.com/docs/4.0/exferences/sticky-footer-navbar ভবিষ্যতে এটি পুরানো সংস্করণে পরিণত হতে পারে বলে আমি মনে করি 4.0।

— আম্মাদ খালিদ

Answer 1

এখানে স্নিপেটগুলি বুটস্ট্র্যাপের জন্য সত্যিই ভাল কাজ করে

এইচটিএমএল:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

সিএসএস:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

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

Comments

আমি এখন পর্যন্ত চেষ্টা করেছি এটিই সেরা সমাধান। উত্তর হিসাবে এটি গ্রহণ।

— ক্যালভিন চেং

হাই, আমি এই পদ্ধতিটি বাস্তবায়ন করেছি, এটি দুর্দান্ত কাজ করে তবে এখন আইফোনটিতে পৃষ্ঠা প্রদর্শন করতে আমার কিছু সমস্যা হয়েছে (পৃষ্ঠাটি জুম করা হয়েছে)। কোন ধারণা কি সমস্যা? : এখানে কিছু বিবরণ stackoverflow.com/questions/18621090/...

— pupadupa

কেবলমাত্র আপনি এই উত্তরটি পড়েছেন এবং স্ক্রোল না করে অন্যান্য উত্তরগুলি দেখার মতো

— ম্যাটিডাব্লু

especialy এই এক: stackoverflow.com/questions/10099422/...

— HenryW

এটি বুটস্ট্র্যাপের জন্য আমি খুঁজে পেয়েছি সেরা পদ্ধতি। ডিভাইস প্রতিক্রিয়াশীলতার জন্য # স্ক্রিনের বিভিন্ন মাপের জন্য # মেইন এবং .ফুটার উচ্চতা আপডেট করতে মিডিয়া ক্যোয়ারীগুলি ব্যবহার করতে ভুলবেন না

— সিনট্যাক্সগুনু

Answer 2

এটি এখন বুটস্ট্র্যাপ ২.২.১ এর সাথে অন্তর্ভুক্ত রয়েছে।

বুটস্ট্র্যাপ 3.x

নববার উপাদানটি ব্যবহার করুন এবং .navbar-fixed-bottomশ্রেণি যুক্ত করুন:

<div class="navbar navbar-fixed-bottom"></div>

বুটস্ট্র্যাপ 4.x

<div class="navbar fixed-bottom"></div>

যোগ করতে ভুলবেন না body { padding-bottom: 70px; }অন্যথায় পৃষ্ঠাগুলি কভার করা যেতে পারে।

দস্তাবেজ: http://getbootstrap.com/components/#navbar-fixed-botom

Comments

@ চুয়ান ইয়ং দুর্ভাগ্যবশত সেখানে নেই navbar-static-bottom।

— লরেন্স উডম্যান

@ মাইক্রোকারি তিনি একটি নির্দিষ্ট পাদলেখ সম্পর্কে জিজ্ঞাসা করেননি, তবে এমন একটি যা শূন্য স্থানটি "পূরণ করে", যদি আপনার পৃষ্ঠায় পাদলেখ নীচে থাকতে পারে তবে পর্যাপ্ত সামগ্রী নেই content যদি আপনার পাদচরণটি কেবল তথ্য সম্পর্কিত হয় তবে একটি স্থির ব্যক্তি কেবল মূল্যবান জায়গা নিচ্ছে।

— rdlu

এটি স্টিকি ফুটার নয়, কারণ এটি ব্যবহার করা হয় অবস্থান: স্থির; যা সঠিক নয়

— ফুরকাত ইউ

হ্যাঁ এই সমাধানটি কেবল পৃষ্ঠার নীচে নয় ভিউপোর্টের নীচে ফ্লাশ করে। অর্থাত্ পাদচরণ সর্বদা দৃশ্যমান।

— rism

উত্তরটি হ্রাস করতে হয়েছিল কারণ এটি বিভ্রান্তি দেয় OP ওপি কোনও স্টিকি ফুটার চায় না।

— হেনরিডাব্লু

Answer 3

টুইটার বুটস্ট্র্যাপের জন্য একটি কার্যকরী উদাহরণ নয় স্টিকার ফোটার

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

ব্যবহারকারী সর্বদা আপডেট হয়ে থাকে এমন সংস্করণটি ডিভলটুলগুলি খোলে বা পুনরায় আকার দেয় উইন্ডো।

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

আপনার কমপক্ষে একটি সহ একটি উপাদান প্রয়োজন #footer

যখন স্ক্রোলবারটি সামগ্রীটি স্ক্রিনে ফিট না হয়
কেবল 10 থেকে 0 এর মান পরিবর্তন করতে চাইলে লিখিত সামগ্রী স্ক্রিনে ফিট না হলে স্ক্রোলবারটি প্রদর্শিত হবে।

Comments

হ্যাঁ, আমি এই এক সাথে গিয়েছিলাম। সিএসএস মাঝে মাঝে এত বোকা হতে পারে। এটি অসম্ভব নয়, তবে সাধারণ উদ্দেশ্যে সমাধানগুলি পাওয়া শক্ত হতে পারে এবং আমাদের লেআউটে বিরক্তিকর জিনিসগুলি ঠিক করা, স্ট্যাক এক্সচেঞ্জ, একাধিক সংক্ষিপ্ত সংস্করণ, ক্রস-ব্রাউজার পরীক্ষা এবং কোনও সাধারণ জেএসের কাছে শেষ পর্যন্ত আত্মসমর্পণ করা উচিত নয় event রত। হ্যাঁ, আমি কিছুটা নোংরা অনুভব করছি তবে কমপক্ষে এটি কাজ করে।

— meecect

আমি দেখেছি প্রতিটি একক সমাধান ভুল। এটি কেবলমাত্র এটি যা করার কথা তা কেবল তাই করে - ব্রাউজারের আকার পরিবর্তন করা হলে কোনও বিষয়বস্তুকে অস্পষ্ট না করে পাদদেশের নীচে ফুটারটি আটকে দিন।

— ডেভ

এটা Didnt কাজ শান্ত সেইসাথে আমার জন্য প্রত্যাশিত, কিন্তু, সবচেয়ে ভালো উত্তর এক, আমি আমার সমস্যা প্রতিস্থাপন দ্বারা নির্ধারিত $('#footer').height();সঙ্গে$('#footer').outerHeight();

— DarkMukke

দুর্দান্ত উত্তর! আমার একটি দম্পতি রূপান্তর হয়েছে যা আমি এখানে এটিকে উন্নত করে বলে মনে করি: stackoverflow.com/a/36385654/8207

— Cory

আমি খুঁজে পেয়েছি সেরা উত্তর। আপনি যদি উইন্ডো পুনরায় আকার দেওয়ার পরে এটি কাজ করতে চান তবে উত্তরটির ভিতর থেকে মূল কোডটি ভিতরে রাখুন $(window).resize(function() {//main code goes here});এবং $(window).resize();পৃষ্ঠাটি লোড হওয়ার পরে সেট করার জন্য অনুরোধ করুন।

— সিজমন সাদোও

Answer 4

অফিসিয়াল পৃষ্ঠা থেকে এটি কীভাবে প্রয়োগ করা যায় তা এখানে:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

আমি এখনই এটি পরীক্ষা করেছি এবং এটি দুর্দান্ত কাজ করে! :)

এইচটিএমএল

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

সম্পর্কিত সিএসএস কোডটি হ'ল:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

Comments

এটি পোস্ট করার জন্য ধন্যবাদ, এটি অবশ্যই আমার বিশেষ প্রকল্পের জন্য সর্বোত্তম সমাধান (একমাত্র যেটি কাজ করেছিল তার উল্লেখ না করা) ছিল এবং অবশ্যই এটি দুর্দান্ত যে এটি সরাসরি প্রকল্প থেকেই from

— Cory ডব্লিউ।

চুক্তিটি কী ছিল তা আমি জানি না, তবে পৃষ্ঠাগুলিতে কোনও স্ক্রোল যুক্ত না করে আমি এটি কাজ করতে পারি না। আমি। র্যাপার সিএসএস পরিবর্তন করে শেষ করেছি যাতে ন্যূনতম উচ্চতা "ক্যালক (100% - 120px)" ছিল যেখানে 120px আমার পাদদেশের উচ্চতা এবং এইচটিএমএল থেকে <div id = "পুশ"> </div> সরিয়ে নিয়েছে যেহেতু আমার প্রয়োজন নেই সেই পৃষ্ঠায় উচ্চতা যুক্ত করা ছাড়া এটি কিছু করছে বলে মনে হয় না।

— Jammyman34

Answer 5

জন্য স্টিকি পাদলেখ আমরা দুটি ব্যবহার DIV'sমৌলিক জন্য HTML এ চটচটে পাদচরণ প্রভাব। এভাবে লিখুন:

এইচটিএমএল

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

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

সিএসএস

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

Comments

তিনি বলেছিলেন যে তিনি টুইটার বুটস্ট্র্যাপ ব্যবহার করছেন। পুরোপুরি এইচটিএমএল পুনরায় লেখা না করে বুটস্ট্র্যাপে এটি সংহত করার সহজতম উপায় কী হবে?

— কোডি গ্রে

ওপি যদি স্টিকি ফুটার ইফেক্ট অর্জন করতে চায় তবে তাকে তার মার্কআপ

— সন্দীপ

ধন্যবাদ! এটিই কেবলমাত্র একটি পদ্ধতি যা আমার জন্য এটিএসপি নেট নেট এমভিসি 5 সাইটে বুটস্ট্র্যাপ ব্যবহার করে actually +1

— ইয়ান দুরান

Answer 6

সরল সরকারী উদাহরণ: http://getbootstrap.com/example/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

Answer 7

ভাল আমি মিশ্রিত navbar-innerএবং navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

এটি ভাল বলে মনে হচ্ছে এবং আমার জন্য কাজ করে

উদাহরণ দেখুন Fiddle

Comments

সহজ এবং সবচেয়ে মার্জিত সমাধান। আপনার নিজের সিএসএস কোড

— বর্ধনের জন্য উদ্বিগ্ন হোন

আমি এটি ব্যবহার করেছি এবং স্ক্রিনের চেয়ে কম সংক্ষিপ্ত পৃষ্ঠাগুলি নিয়ে একটি পুরানো অ্যান্ড্রয়েডের (সম্ভবত ফ্রেয়?) সমস্যা ছিল। অন্যথায় মুক্তিযোদ্ধা, Chrome IE11, আইফোন, Nexus 7 উপর ভাল কাজ

— bnieland

নিখুঁত এবং অত্যন্ত সহজ!

— ramires.cabral

Answer 8

ইন সর্বশেষ সংস্করণ বুটস্ট্র্যাপ 4.3, এই ব্যবহার করা যেতে পারে .fixed-bottomবর্গ।

<div class="fixed-bottom"></div>

পাদলেখ দিয়ে আমি এটি কীভাবে ব্যবহার করব তা এখানে:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

আপনি এখানে অবস্থানের ডকুমেন্টেশনে আরও তথ্য পেতে পারেন ।

Comments

এটি এখনও অফিশিয়াল 4 সংস্করণে কাজ করে।

— ক্লিভিস

নোট করুন যে getbootstrap.com/docs/4.1/example/sticky-footer এর উদাহরণটিতে ফুটার উপাদানটিতে একটি লাইন-উচ্চতা = 60px শৈলী রয়েছে। এটি কেবল অপ্রয়োজনীয় নয়, পাদলেখ যদি এক বা একাধিক ডিভ উপাদানগুলির পিতা বা মাতা হয় তবে এটি সঠিকভাবে কাজ করতে বাধা দেয় which

— স্কটিবিবি

Answer 9

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

• অদৃশ্য চিহ্নিত করে এবং জাভাস্ক্রিপ্টে দৃশ্যমান সেট করে পৃষ্ঠা লোডের "ঝাঁপিয়ে পড়া" এড়ানো
• ব্রাউজারের সাথে ডিল করা কৌতূহলীভাবে পুনরায় আকার দেয়
• ব্রাউজারটি ছোট হয়ে যায় এবং ফুটার পৃষ্ঠার চেয়ে বড় হয়ে যায় তবে অতিরিক্তভাবে পাদদেশটিকে পৃষ্ঠার ব্যাক আপ করুন
• উচ্চতা ফাংশন টুইট

এই টুইটগুলি দিয়ে আমার জন্য কী কাজ করেছে তা এখানে:

এইচটিএমএল:

<div id="footer" class="invisible">My sweet footer</div>

সিএসএস:

#footer {
    padding-bottom: 30px;
}

javascript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

Answer 10

এটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে।

আপনার পাদদেশে এই শ্রেণীর নাবার-স্থির-নীচে যুক্ত করুন।

<div class="footer navbar-fixed-bottom">

আমি এটি এর মতো ব্যবহার করেছি:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

এবং এটি সম্পূর্ণ প্রস্থ উপরে নীচে সেট।

সম্পাদনা করুন: এটি সর্বদা দৃশ্যমানের জন্য পাদলেখ সেট করবে, এটি আপনার বিবেচনায় নেওয়া উচিত।

Answer 11

.container-fluidআপনার স্টিকি ফুটারে কাজ করার জন্য আপনাকে আপনার ডিভটি মোড়ানো দরকার , আপনি নিজের .wrapperক্লাসে কিছু সম্পত্তিও হারিয়েছেন । এটা চেষ্টা কর:

padding-top:70pxআপনার bodyট্যাগ থেকে অপসারণ করুন এবং এটি এর .container-fluidপরিবর্তে এটিতে অন্তর্ভুক্ত করুন :

.wrapper > .container-fluid {
    padding-top: 70px;
}

আমাদের এটি করতে হবে কারণ নভবারটি সংযুক্ত করার জন্য bodyনীচে চাপ দেওয়া শেষ হয়ে ভিউপোর্টটি পেরিয়ে ফুটারটিকে আরও খানিকটা এগিয়ে (70px আরও) সমাপ্ত করে যাতে আমরা একটি স্ক্রোলবার পাই। .container-fluidপরিবর্তে ডিভ ঠেলে আমরা আরও ভাল ফলাফল পাই ।

এরপরে আমাদের ডিভের .wrapperবাইরে ক্লাসটি সরিয়ে ফেলতে হবে .container-fluidএবং এর #mainসাথে আপনার ডিভটি মুড়ে দিতে হবে:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>  

আপনার ফুটার অবশ্যই .wrapperডিভের বাইরে থাকতে হবে তাই এটি `.আলেপার ডিভি থেকে সরান এবং এটিকে এর বাইরে রাখুন:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

সব শেষ হয়ে যাওয়ার পরে, সঠিকভাবে .wrapperনেগেটিভ মার্জিন ব্যবহার করে আপনার পাদচরণকে আপনার শ্রেণীর আরও কাছে ধাক্কা দিন :

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

এবং এটি কাজ করা উচিত, যদিও আপনি সম্ভবত স্ক্রিনটি পুনরায় আকার দেওয়ার সময় এটি কাজ করার জন্য কয়েকটি অন্যান্য জিনিস সংশোধন করতে যাচ্ছেন যেমন .wrapperশ্রেণীর উচ্চতা পুনরায় সেট করার মতো:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

Answer 12

এটি টুইটার বুটস্ট্র্যাপ এবং নতুন নভবার-ফিক্সড-নীচের শ্রেণীর সাথে এটি করার সঠিক উপায়: (আমি আপনাকে এটি খুঁজে পেতে কতক্ষণ ব্যয় করেছি জানিনা)

সিএসএস:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

এইচটিএমএল:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer 13

বুটস্ট্র্যাপ 4 এ নির্মিত ফ্লেক্স ইউটিলিটিগুলি ব্যবহার করুন! বেশিরভাগ বুটস্ট্র্যাপ 4 টি ইউটিলিটি ব্যবহার করে আমি এখানে এসেছি।

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

• .d-flex প্রধান ডিভ একটি ফ্লেক্স ধারক করতে
• .flex-column কলামে আপনার ফ্লেক্স আইটেমগুলি সাজানোর জন্য প্রধান ডিভ এ
• min-height: 100vh মূল বিভাজনে, কোনও স্টাইলের বৈশিষ্ট্য সহ বা আপনার সিএসএসে, ভিউপোর্টটি উল্লম্বভাবে পূরণ করতে
• .flex-grow-1 ধারকটিতে, মূল বিষয়বস্তু ধারকটি ভিউপোর্টের উচ্চতায় থাকা সমস্ত স্থান গ্রহণ করে।

Comments

পরিবর্তে বুটস্ট্র্যাপ থেকে বর্গ ব্যবহার করা যাবে। min-height: 100vhmin-vh-100

— ইকনুক

এই সমাধান মিনিট-VH-100 @ikonuk থেকে পরামর্শের সহ কাজ করে মহান

— TGR

Answer 14

নাভবার উপাদানটি ব্যবহার করুন এবং .navbar- স্থির-নীচের শ্রেণি যুক্ত করুন:

<div class="navbar navbar-fixed-bottom"></div>

শরীর যোগ করুন

  { padding-bottom: 70px; }

Answer 15

প্রস্থের সীমাবদ্ধতার বিন্যাসগুলি পরিচালনা করতে নীচেরটি ব্যবহার করুন যাতে আপনি বৃত্তাকার কোণগুলি না পান এবং যাতে আপনার এনএভি বারটি অ্যাপ্লিকেশনের পাশের দিকে ফ্লাশ হয় will

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

তবে আপনি উচ্চতা, ফন্ট এবং রঙ সমন্বয় করতে বুটস্ট্র্যাপ ক্লাসগুলিকে ওভাররাইড করতে সিএসএস ব্যবহার করতে পারেন

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

Answer 16

আপনি এটি পরিচালনা করতে jQuery ব্যবহার করতে পারেন:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

Answer 17

একমাত্র আমার পক্ষে কাজ করেছেন !:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

Answer 18

সবচেয়ে সহজ কৌশলটি হ'ল navbar-static-bottomমূল কন্টেইনার ডিভি height: 100vh(নতুন CSS3 ভিউ পোর্ট শতাংশ ) নির্ধারণের সাথে একত্রে বুটস্ট্র্যাপ ব্যবহার করা । এটি পাদলেখ নীচের দিকে ফ্লাশ করবে।

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

Answer 19

পরীক্ষিত Bootstrap 3.6.6।

এইচটিএমএল

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

সিএসএস

.footer {
  bottom: 0;
  position: absolute;
}

Answer 20

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

পাদলেখের উচ্চতা মোড়কের উপাদানটির নীচের ইনডেন্টের আকারের সাথে মেলে।

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

Answer 21

ফ্লেক্সবক্স ব্যবহার করে বুটস্ট্র্যাপের সর্বশেষতম সংস্করণ (লেখার সময় 4.3) এর সমাধান রয়েছে।

এইচটিএমএল:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

সিএসএস:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

এবং একটি কোডপেন উদাহরণ: https://codepen.io/tillytoby/pen/QPdomR

Answer 22

প্রতি বুটস্ট্র্যাপ 4.3 উদাহরণস্বরূপ , যদি আপনি আপনার মানসিক সুস্থতা হারানোর করছেন আমি, এই এটা আসলে কিভাবে কাজ করে:

• ফুটার ডিভের সমস্ত পিতামাতার height: 100%( h-100শ্রেণি) থাকা দরকার
• পাদলেখের প্রত্যক্ষ পিতামাতাকে display: flex(d-flex বর্গ) থাকা দরকার
• ফুটারের margin-top: auto( mt-autoশ্রেণি) থাকা দরকার

সমস্যাটি হ'ল আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্কগুলিতে আমাদের প্রায়শই এই উপাদানগুলির চারপাশে অতিরিক্ত মোড়ক থাকে।

উদাহরণস্বরূপ, আমার ক্ষেত্রে, কৌনিক সহ আমি পৃথক অ্যাপ্লিকেশন রুট, প্রধান অ্যাপ্লিকেশন উপাদান এবং পাদচরণের উপাদান থেকে ভিউটি রচনা করেছি - এগুলি সমস্তই তাদের কাস্টম উপাদানটি ডিওমে যুক্ত করেছে।

সুতরাং, এটি কাজ করার জন্য, আমাকে এই মোড়কের উপাদানগুলিতে ক্লাস যুক্ত করতে হয়েছিল: একটি অতিরিক্ত h-100, d-flexএক স্তরকে নীচে নিয়ে যাওয়া এবং mt-autoএক স্তরকে পাদলেখ থেকে উপরে নিয়ে যাওয়া (তাই আসলে এটি আর ফুটার শ্রেণিতে নয়, তবে আমার <app-footer>কাস্টমকে উপাদান)।

Comments

আমারও ট্যাগ লাগাতে class="h-100"হয়েছিল <html>।

— কেল সোলার

Answer 23

কোডটির এই টুকরাটি বুটস্ট্র্যাপে কাজ করে Use

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

Answer 24

বুটস্ট্র্যাপ ভি 4 + সমাধান

এখানে এমন একটি সমাধান রয়েছে যার জন্য এইচটিএমএল কাঠামোর পুনর্বিবেচনা বা প্যাডিং যুক্ত কোনও অতিরিক্ত সিএসএস ট্রিকারি প্রয়োজন হয় না:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

নোট করুন যে এই সমাধানটি নমনীয় উচ্চতা সহ পাদদেশীদের জন্য মঞ্জুরি দেয়, যা সঙ্কুচিত হওয়ার সময় সামগ্রী মোড়ক সহ একাধিক স্ক্রিন আকারের জন্য পৃষ্ঠাগুলি ডিজাইন করার সময় কার্যকর হয়।

কেন এই কাজ করে

• style="height:100%;"তোলে <html>ট্যাগ ডকুমেন্টের পুরো স্থান গ্রহণ।
• ক্লাস আমাদের ট্যাগ d-flexসেট ।display:flex<body>
• ক্লাস আমাদের ট্যাগ flex-columnসেট । তার চিলড্রেন ( , , এবং অন্য কোন সরাসরি সন্তান) এখন উল্লম্বভাবে প্রান্তিককৃত হয়।flex-direction:column<body><header><main><footer>
• ক্লাস আমাদের h-100সেটheight:100%<body> ট্যাগে , যার অর্থ এটি পুরো স্ক্রিনটিকে উল্লম্বভাবে কভার করবে।
• ক্লাসটি আমাদের flex-grow-1সেট flex-grow:1করে <main>, কার্যকরভাবে এটিকে যে কোনও অবশিষ্ট উল্লম্ব স্থান পূরণ করার জন্য নির্দেশ দেয়, এইভাবে আমরা আমাদের <body>ট্যাগটিতে আগে যে 100% উল্লম্ব উচ্চতা সেট করি to

এখানে কাজ করার ডেমো: https://codepen.io/maxencemaire/pen/VwvyRQB

ফ্লেক্সবক্স সম্পর্কিত আরও তথ্যের জন্য https://css-tricks.com/snippets/css/a-guide-to-flexbox/ দেখুন ।

Comments

h-100ক্লাস সঠিকভাবে কাজ করে না, এটি ব্যবহার করা ভাল min-vh-100।

— ইকনুক

@ikonuk "সঠিকভাবে কাজ করে না" বলতে আপনার অর্থ কী? সম্প্রসারিত করুন.

— কাঠেন্দ্রেক্স

কারণ h-100শ্রেণি সর্বদা পিতামাত্ত্বিক উপাদানগুলির উচ্চতার উপর নির্ভর করে এবং কিছু ক্ষেত্রে সঠিকভাবে কাজ নাও করতে পারে। যেহেতু আমরা ভিউপোর্টের নীচে ফুটার চাই, ভিউপোর্টের উচ্চতা ব্যবহার করা ভাল অভ্যাস হবে।

— আইকনুক

আবার 'কিছু কেস' সংজ্ঞায়িত করুন। পিতা-মাতার নির্ভরতা সম্পর্কে আপনার যুক্তি কেবল একই ক্ষেত্রে প্রযোজ্য min-width। এই কারণেই HTMLকোডটিতে কোডটির একটি height100% রয়েছে। উদাহরণটি কাজ করে এবং আমি দেখতে পাচ্ছি না কেন এটি সিএসএস heightসম্পত্তিটির জন্য ক্রস ব্রাউজার সমর্থন দেয় নি , যা শেষ পর্যন্ত বুটস্ট্র্যাপ স্নিপেট অনুবাদ করে।

— কাঠেনড্রাক্স

আমি বলিনি যে আপনার উদাহরণটি কাজ করে না। সবাই HTMLট্যাগে স্টাইল ব্যবহার করে না । আমার ক্ষেত্রে, আপনার HTMLট্যাগটি কার্যকর হয়নি কারণ আমি ট্যাগটিতে শৈলী ব্যবহার পছন্দ করি না । এবং আমি চাই না যে bodyট্যাগটি অন্য পিতামাতার উপর নির্ভর করে তবে ভিউপোর্টের উপর নির্ভর করে। আপনি করা হবে না style="height:100%;"এবং h-100একই সময়ে। ফেলে min-vh-100শরীর থেকে কেবল কাজ এবং কম কোড আছে।

— আইকনুক

Answer 25

দেখে মনে হচ্ছে height:100%'চেইন' ভেঙে যাচ্ছে div#main। height:100%এটিতে যুক্ত করার চেষ্টা করুন এবং এটি আপনাকে আপনার লক্ষ্যের আরও কাছে নিয়ে যেতে পারে।

Answer 26

এখানে আপনি পৃষ্ঠার নীচে শীর্ষে এবং পাদদেশে নববারের সাথে এইচএএমএল ( http://haml.info ) এ পদ্ধতিটি পাবেন :

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

Comments

আপনি কি নিজের উত্তরটি কিছুটা ব্যাখ্যা করতে পারবেন? কেবলমাত্র কোডের উত্তরগুলি সাধারণত নিরুৎসাহিত করা হয়।

— কিউস - মনিকি

ঠিক আছে, আপনি কি জানতে চান?

— হ্যানিস

আমার এটি জানার দরকার নেই তবে পরে এই সাইটে আসা কেউ হয়তো জানেন না কেন আপনার উত্তরের কোডটি এটি কী করে।

— কিউস - মনিিকা

সম্ভবত আমার এটি মুছে ফেলা উচিত। আমি একটি নতুন ভূমিকা লিখলাম। :)

— হেনেস

Answer 27

সহজবোধ্য রাখো.

footer {
  bottom: 0;
  position: absolute;
}

আপনাকে margin-bottomপাদলেকের উচ্চতার সমতুল্য যোগ করে ফুটারের উচ্চতা অফসেট করার প্রয়োজন হতে পারে body।

Answer 28

এখানে CSS3 ব্যবহার করে একটি উদাহরণ দেওয়া হয়েছে:

সিএসএস:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

এইচটিএমএল:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

বেহালা

Answer 29

বুটস্ট্র্যাপ এটি এটি করে:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

কেবল পৃষ্ঠার উত্স ব্যবহার করুন এবং আপনি দেখতে সক্ষম হবেন। ডান ' <div id="wrap">একটি শীর্ষ ভুলে যান ।

Answer 30

আর একটি সম্ভাব্য সমাধান, কেবল মিডিয়া ক্যোয়ারী ব্যবহার করে

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}