টুইটার বুটস্ট্র্যাপ 3 স্টিকি পাদলেখ

204

আমি বেশ কিছুক্ষণের জন্য টুইটার বুটস্ট্র্যাপ কাঠামো ব্যবহার করছি এবং তারা সম্প্রতি সংস্করণ 3 এ আপডেট হয়েছে!

নীচে লেগে থাকার জন্য আমি স্টিকি পাদলেখ পেতে সমস্যায় পড়ছি, আমি টুইটার বুটস্ট্র্যাপ ওয়েবসাইট সরবরাহিত স্টার্টার টেম্পলেট ব্যবহার করেছি, তবে এখনও ভাগ্য নেই, কোনও ধারণা নেই?

html  css  twitter-bootstrap  twitter-bootstrap-3 
— ব্র্যাড ফ্লেচার
সূত্র
31
অফিসিয়াল উদাহরণ: getbootstrap.com/example/sticky-footer-navbar
— ptim
3
@ মেমল্যাব অফিসিয়াল উদাহরণে বডি মার্জিন-ডাউন সম্পর্কে কিছু নেই কেন: -60px? নাকি আমি মিস করেছি ...?
— 16
স্টিকি ফুটারের জন্য ভেরিয়েবল উচ্চতার অনুমতি দেয় এমন একটি সিএসএস সমাধান যুক্ত করা হয়েছে । এটিকে এখানে যুক্ত করেছেন, নতুন উত্তর হওয়ায় এটি পৃষ্ঠার নীচে রয়েছে।
— তাও

উত্তর:

193

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

<div class="footer navbar-fixed-bottom">
— জন
সূত্র
32
এটি স্টিকি ফুটারের মতো নয়
— ইউরা ওমেলচুক
3
আপনার যদি শিরোলেখ এবং পাদলেখ থাকে তবে আপনি একটি মোবাইল ডিভাইসে খুব বেশি জায়গা ছেড়েছেন।
— স্ট্রাটন
4
@ স্ট্রাটটন যে মিডিয়ার প্রশ্নগুলির জন্য এটি তা
— জ্যাকব র্যাকুইয়া
20
পৃষ্ঠাটির কোনও স্ক্রোল না লাগলে এটি পুরোপুরি কাজ করে। তবে পাদদেশে আরও সামগ্রী সহ পাদলেখগুলি ওভারল্যাপ হয়। এই সম্পর্কে কোন workaround? ধন্যবাদ!
— এক্সপ্ল্লোরা
1
ওভারল্যাপ সমস্যা সম্পর্কে নিশ্চিত না, তবে মার্জিন / প্যাডিং যুক্ত করা সমস্যার সমাধান করে না?
— জন
152

অফিসিয়াল বুস্ট্রা ৩.১ স্টিকি পাদচরণের উদাহরণ উল্লেখ করে, এখানে যুক্ত করার দরকার নেই <div id="push"></div>এবং সিএসএস সহজতর।

অফিসিয়াল উদাহরণে ব্যবহৃত সিএসএস হ'ল:

/* 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;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

এবং প্রয়োজনীয় এইচটিএমএল:

<body>

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

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

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

      </div>
    </div>
</body>

আপনি এই সিএসএসের লিঙ্কটি স্টিকি ফুটার উদাহরণের উত্স কোডটিতে সন্ধান করতে পারেন ।

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

সম্পূর্ণ ইউআরএল: http://getbootstrap.com/example/sticky-footer/sticky-footer.css

— tkymtk
সূত্র
21
অফিসিয়াল স্টিকি-ফুটার উদাহরণে এইচটিএমএল এবং সিএসএস এখন এখানে বর্ণিত বর্ণনার থেকে একেবারেই আলাদা।
— আইয়ানবি
52

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

এখানে উদাহরণ: সহজ স্টিকি পাদলেখ

এটি সরাসরি আপনার কোডে অনুলিপি করুন এবং আটকান। কোন গোলমাল নেই।

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
— anataliocs
সূত্র
4
খুব সুন্দর এবং দ্রুত। প্রতিক্রিয়াশীলও হতে পারে। পৃষ্ঠার সামগ্রীর নীচে কিছু অতিরিক্ত স্থান যুক্ত করার প্রয়োজন রয়েছে যাতে এটি ফুটার দ্বারা লুকানো থাকে না। ফুটারের উচ্চতার সমান জায়গার উচ্চতা থাকা উচিত। আপনি কীভাবে সেরা তা করতে পারেন? বিটিডব্লিউ "কোনও সিএসএসের প্রয়োজন নেই" প্রযুক্তিগতভাবে ভুল is এটি "বুটস্ট্র্যাপ ক্লাস ব্যতীত কোনও অতিরিক্ত সিএসএসের প্রয়োজন নেই" হওয়া উচিত ।
— এডিটিসি
1
আমি পছন্দ করি যে এটি বুটস্ট্র্যাপে বিদ্যমান যা হ্রাস করে। আমি কাজের অন্যান্য শীর্ষ উত্তরগুলি পেতে পারি না তবে এটি আমার পৃষ্ঠায় এবং পেট বেঁধে আটকে রেখেছি y ধন্যবাদ!
— haakon.io
34

আপনি সবে যুক্ত করা CSS ছাড়াও মনে রাখবেন আপনাকে পুশ ডিভ যুক্ত করতে হবে বন্ধ করার আগে আপনাকে

এইচটিএমএল জন্য মূল কাঠামো হয় 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

লাইভ ভিউ
এডিট দর্শন

— ডেভিড তাইয়ারোয়া
সূত্র
পৃষ্ঠার সামগ্রীগুলি যদি উপলভ্য প্রদর্শনের চেয়ে বড় হয় তবে পাদচরণটি নীচে নামানো হবে। আমি চাই যে
— পাদদেশটি সত্যিই
আরে @delavnog, আপনার জন্য এই কাজ মত কিছু হবে? কোডেপেন.ইও / পঞ্চরোমা / ওপেন / ডাব্লুএমএক্সডব্লিউপিওয়াই । আপনার জন্য কেবলমাত্র গুরুত্বপূর্ণ বিটগুলি
— হ'ল
@ দেলাভনোগ, পৃষ্ঠা কোডেপেন.ও.পঞ্চমোমা
— ডেভিড
ধন্যবাদ, দারুণ! এখন, যদি আমি নেভ এবং পাদলেখের মধ্যে উল্লম্বভাবে মূল ডিভটি পেতে পারি তবে এটি দুর্দান্ত! আপনার কোডপেনটি সম্পাদনা করেছে: codepen.io/anon/pen/rxKMaW (আমাকে শরীরে একটি মার্জিন যুক্ত করতে হয়েছিল, কারণ এনএভি সামগ্রীর উপরের
— অংশটি খাচ্ছে
@ দেলাভনোগ, মূল শরীরটি খুব বেশি না হলে এখানেই শুরু। দীর্ঘতর বিষয়বস্তুর জন্য এটি আরও বেশি কাজ করতে পারে: কোডেপেন.আইও
— ডেভিড
30

আজকের হিসাবে এখানে স্টিকি পাদলেখের সরলীকৃত কোড রয়েছে কারণ তারা সর্বদা এটিকে অনুকূল করে তুলছে এবং এটি দুর্দান্ত:

এইচটিএমএল

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</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. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

সিএসএস

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
— লেনিয়েল ম্যাকাফেরি
সূত্র
1
নিখুঁত সমাধান. এটাই আমি খুঁজছিলাম।
— লেবিমেট
1
দুর্ভাগ্যক্রমে এই পাদলেখের আকার স্থির রয়েছে। কখনও কখনও, যখন পাদলেখ গতিশীল হয় তবে এটি CSS এর উচ্চতার চেয়ে বড় বা ছোট হতে পারে।
— 23
27

আমি এই বিষয়ে কিছুটা দেরি করেছি তবে আমি এই পোস্টটি পেরিয়ে এসেছি কারণ আমাকে কেবল এই প্রশ্নটি দ্বারা দংশন করা হয়েছে এবং অবশেষে এটি অতিক্রম করার খুব সহজ উপায় খুঁজে পেয়েছি, কেবল ক্লাস সক্ষম navbarসহ একটি ব্যবহার করুন navbar-fixed-bottom। উদাহরণ স্বরূপ:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

আছে HTH

— iMil
সূত্র
আমি আপনার উত্তরের সরলতা এবং কার্যকারিতা পছন্দ করি, এটি যাইহোক একটি বুদ্ধিমান উত্তর। একই ইস্যুতে অনেক উত্তর jquery, এবং জটিল স্টাফ পূর্ণ। ধন্যবাদ মানুষ.
— ডিজাই
1
এটির অর্ধ সমাধান, আপনি এখনও যদি এটির আকার পরিবর্তন করেন তবে আপনার পৃষ্ঠায় থাকা সামগ্রীর ওভারল্যাপগুলির যত্ন নেওয়া দরকার।
— বালদরনি
@ বালড্রনি এটির কোনও সম্পূর্ণ সমাধান নয়, আপনি বুটের এইচটিএমএল বুটস্ট্র্যাপ সারি এবং কর্ন ব্যবহার করলে ওভারল্যাপ হয় (যা আপনাকে যা করা উচিত)
— টিনো ম্যাকলারেন
এটি কোনও স্টিকি ফুটার নয়। এটি একটি স্থির নীচের ন্যাবার যা কেবল নাবার বারের সামগ্রীর জন্য উপযুক্ত এবং পৃষ্ঠা সামগ্রীতে ওভারল্যাপ হয়।
— জিম
10

এই সমস্যাটির জন্য আমার আপডেট সমাধান এখানে। 

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

এবং এটি এর মতো ব্যবহার করুন: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

অথবা 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
— জি
সূত্র
4
এটি কোনও ভাল সমাধান নয় কারণ আপনার পাদচরণ স্থির করা হয়েছে যার অর্থ এটি পৃষ্ঠা সামগ্রীতে (যদি থাকে তবে) ওভারল্যাপ করে। some text<br>পাদলেখ এবং উইন্ডোটি আকারের আগে কয়েকটি লাইন যুক্ত করার চেষ্টা করুন ।
— jmarceli
@ ব্যবহারকারী 2041318: হ্যাঁ ভয়ংকর ... এটি দেখানোর জন্য ধন্যবাদ।
— সেবাস্তিয়ান
জামারসেলি মন্তব্য অনুসারে এটি সংশোধন করা হয়েছে। পাদচরণটি আর ঠিক করা হয়নি।
— জি
3

স্টিকি উদাহরণটি আমার পক্ষে কাজ করে না। আমার সমাধান:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— আন্ডি গিগা
সূত্র
সাধারণ, ভাল পুরানো ফ্যাশন সিএসএস। কাজ শেষ. উচ্চ-রেট প্রাপ্ত উত্তরগুলির মধ্যে কতগুলি সংশ্লেষিত হয়েছে তা আমি মজাদার বলে মনে করি। বুটস্ট্র্যাপ কি আমাদের জীবনকে আরও সহজ করার কথা নয়? 😂
— কাল
2

এর মধ্যে ধাক্কাটি divঠিক ঠিক পরে যাওয়া উচিত, wrapঠিক এর মতোই নয় 

<div id="wrap">
  *content goes here*
</div>

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

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
— জোসেফ
সূত্র
2

ওপি দ্বারা উত্তর:

এটি আপনার সিএসএস ফাইলে যুক্ত করুন।

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 -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
— CodeCaster
সূত্র
2

আমি একটি নমনীয় স্টিকি ফুটার চাই , এজন্যই আমি এখানে এসেছি। শীর্ষস্থানীয় উত্তরগুলি আমাকে সঠিক দিকে নিয়ে গেছে।

বর্তমান (2 অক্টোবর 16) বুটস্ট্র্যাপ 3 সিএসএস স্টিকি পাদলেখ (স্থির আকার) এর মতো দেখাচ্ছে:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

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

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

এটি ডেমো করার জন্য স্নিপেট এবং তারপরে ফুলস্ক্রিনটি চালান।

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
স্নিপেট প্রসারিত করুন

— কঠোর
সূত্র
2

এটি ফ্লেক্সবক্স দ্বারা একবার এবং চিরকাল সমাধান করা হয়েছে:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

এইচটিএমএল

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

সিএসএস

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
— কনস্ট্যান্টিন শোবার্ট
সূত্র
2

সাধারণ জেএস

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

আপডেট # 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
— fdrv
সূত্র
1

এগুলির সমস্ত সংক্ষিপ্তসার হিসাবে, কেবল একটি জিনিস আপনার মনে রাখবেন যে পাদলেখ বাদে সমস্ত কিছু min-height: 100%বা কম হওয়া উচিত ।

— kshirish
সূত্র
1

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

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
— ফ্রেড কে
সূত্র
1

জেক-এফডিআরভির উত্তরের ভিত্তিতে , আমি .on('resize', function()এটি প্রতিটি ডিভাইস এবং প্রতিটি রেজোলিউশনে কাজ করে তা নিশ্চিত করার জন্য একটি যুক্ত করেছি :

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
— iamchriswick
সূত্র
1

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

— সিজে কাতালানো
সূত্র
1

সম্পূর্ণরূপে প্রতিক্রিয়াশীল ভেরিয়েবল-উচ্চতা স্টিকি ফুটারের জন্য সিএসএস ভিত্তিক সমাধান।
সুবিধা: পাদলেখগুলি পরিবর্তনশীল উচ্চতাকে অনুমতি দেয়, কারণ উচ্চতায় আর CSS এ হার্ড-কোডিং হওয়া দরকার না।

কোড স্নিপেট দেখান

এবং এখানে আন-প্রিফিক্স করা হয়েছে SCSS(এর জন্য gulp/grunt ):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
— তাও
সূত্র
1

শুধু ফ্লেক্স ব্যবহার করুন! আপনার এইচটিএমএলে বডি এবং মেন ব্যবহার করার বিষয়টি নিশ্চিত করুন এবং এটি সেরা সমাধানগুলির মধ্যে একটি (যদি আপনার আইই 9 সমর্থন প্রয়োজন না হয়)। এটির জন্য নির্দিষ্ট উচ্চতা বা সিমেন্টের প্রয়োজন নেই।

এটি মেটেরাইজেশনের জন্যও প্রস্তাবিত!

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

main {
    flex: 1 0 auto;
}
— kentor
সূত্র
0

হামল ও স্যাস শব্দে যা যা প্রয়োজন তা:

হামল জন্য app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass for app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

http://getbootstrap.com/example/sticky-footer-navbar/ এর উপর ভিত্তি করে

— equivalent8
সূত্র
0

আপনি যদি ফুটারের জন্য ক্লাসে বুটস্ট্র্যাপ বিল্ড ব্যবহার করতে চান। আপনার কিছু জাভাস্ক্রিপ্টও লেখা উচিত:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

এটি নির্দিষ্ট পাদলেখ দ্বারা সামগ্রিক ওভারল্যাপিং প্রতিরোধ করবে এবং এটিটি সামঞ্জস্য করবে padding-bottom ব্যবহারকারী যখন উইন্ডো / স্ক্রিনের আকার পরিবর্তন তখন ।

উপরের স্ক্রিপ্টে আমি ধরে নিয়েছি যে পাদলেখ সরাসরি শরীরের ট্যাগের মধ্যে এইভাবে স্থাপন করা হয়:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

এটি অবশ্যই সর্বোত্তম সমাধান নয় (কারণ জেএসটি এড়ানো যেতে পারে), তবে এটি ওভারল্যাপিংয়ের সাথে কোনও সমস্যা ছাড়াই কাজ করে, এটি কার্যকর করা সহজ এবং প্রতিক্রিয়াশীল ( heightসিএসএসে হার্ডকোড হয় না)।

— jmarceli
সূত্র
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
স্নিপেট প্রসারিত করুন

— Gpak
সূত্র
নীচে এই স্টিকি কেমন?
— সেবাস্তিয়ান
0

আপনি বুটস্ট্র্যাপে ব্যবহার করতে পারেন এটি একটি খুব সহজ এবং পরিষ্কার স্টিকি পাদলেখ। সম্পূর্ণ প্রতিক্রিয়াশীল!

এইচটিএমএল

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

সিএসএস

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

উদাহরণ: কোডপেন ডেমো

— Gothburz
সূত্র
পরম অবস্থানের কারণে বুটস্ট্র্যাপ মডেল খোলার সময় এই সমাধানটি ফুটার বারকে ডানে সরিয়ে দেবে!
— থেঠাকুরি
0

ব্যবহার flexboxসহজ পদ্ধিতি হল উপায় আমি লোকেদের থেকে পাওয়া করেছি সিএসএস-ট্রিকস । এটি সত্য স্টিকি-পাদলেখ, এটি পৃষ্ঠার <100% এবং পৃষ্ঠার 100%% হয়ে গেলে এটি কাজ করে:

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

এবং সিএসএস:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

নোট করুন যে এটি বুটস্ট্র্যাপ-অজোনস্টিক, সুতরাং এটি বুটস্ট্র্যাপ এবং এটি ছাড়া কাজ করে।

— bustawin
সূত্র
0

আপনি কেবল নিজের পাদলেখের নববারে একটি ক্লাস যুক্ত করার চেষ্টা করতে পারেন:

navbar-fixed-bottom

তারপরে কাস্টম.কম এবং বডি প্যাডিং নামে একটি সিএসএস তৈরি করুন ..

body { padding-bottom: 70px; }
— ইকরাম - উদ - দৌলা
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.