it-swarm.dev

تويتر Bootstrap 3 مثبت تذييل الصفحة

لقد تم استخدام إطار Twitter bootstrap لفترة طويلة الآن وتم تحديثه مؤخرًا إلى الإصدار 3!

أواجه مشكلة في جعل التذييل اللزج متمسكًا بالجزء السفلي ، وقد استخدمت قالب بدء التشغيل الذي يوفره موقع Twitter bootstrap ، لكنني لم أحالف الحظ ، أي أفكار؟

198
Brad Fletcher

ما عليك سوى إضافة navbar-bottom-bottom إلى تذييلك.

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

بالرجوع إلى مثال تذييل Boostrap3 الرسمي اللاصق ، ليست هناك حاجة لإضافة <div id="Push"></div> ، و CSS أبسط.

CSS المستخدم في المثال الرسمي هو:

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

و HTML الأساسي:

<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>

يمكنك العثور على الرابط الخاص بـ css في رمز مصدر sticky-footer exemaple .

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

عنوان URL الكامل: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

151
tkymtk

إليك طريقة لإضافة تذييل لاصق لا يتطلب أي CSS أو Javascript إضافية بخلاف ما هو موجود بالفعل في Bootstrap ولن يتداخل مع تذييلك الحالي.

مثال هنا: Easy Sticky Footer

فقط انسخ والصق هذا مباشرة في التعليمات البرمجية الخاصة بك. لا ضجة لا موس.

<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>
50
anataliocs

بالإضافة إلى CSS الذي أضفته للتو ، تذكر أنك بحاجة إلى إضافة دفع div قبل إغلاق div التفاف

الهيكل الأساسي لـ HTML هو

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

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

عرض لايف
تحرير عرض

34
David Taiaroa

لقد تأخرت قليلاً عن الموضوع ، لكنني صادفت هذا المنشور لأنني كنت قد تعرضت للتو للعض من خلال هذا السؤال وأخيراً وجدت طريقة سهلة حقًا للتغلب عليه ، استخدم ببساطة 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

28
iMil

إليك شفرة Sticky Footer المبسطة اعتبارًا من اليوم لأنها تعمل دائمًا على تحسينها وهذا أمر جيد:

HTML

<!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>

CSS

/* 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;
}
27
Leniel Maccaferri

إليكم الحل المحدث لهذه المشكلة.

 /* 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;
}
10
zee

أجاب عليها البروتوكول الاختياري:

أضف هذا إلى ملف CSS الخاص بك.

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;
  }
}
2
CodeCaster

يجب أن يتم الضغط على 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
Joseph

المثال اللزج لا يعمل بالنسبة لي. بلدي الحل:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
2
Andi Giga

شبيبة بسيطة

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

أردت تذييل لاصق مرن ، ولهذا السبب جئت إلى هنا. أفضل الإجابات حصلت لي في الاتجاه الصحيح.

الحالي (2 أكتوبر 16) Bootstrap 3 css تذييل مثبت (حجم ثابت) يشبه هذا:

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

طالما أن تذييل الصفحة ذو حجم ثابت ، فإن أسفل الهامش في الجسم ينشئ دفعًا للسماح لجيب تذييل الصفحة بالجلوس فيه. في هذه الحالة ، يتم ضبط كلاهما على 60 بكسل. ولكن إذا لم يكن تذييل الصفحة ثابتًا ويتجاوز ارتفاعه 60 بكسل ، فسيغطي محتوى صفحتك.

جعل مرنة: حذف هامش الجسم المغلق وارتفاع تذييل الصفحة. ثم أضف جافا سكريبت للحصول على ارتفاع التذييل وضبط هامش الجسم Bottom. يتم ذلك باستخدام وظيفة setfooter (). قم بإضافة مستمعي الأحداث التاليين عند تحميل الصفحة لأول مرة وعند تغيير حجم تشغيل جهاز setfooter. ملاحظة: إذا كان تذييل الصفحة يحتوي على الأكورديون أو أي شيء آخر يؤدي إلى تغيير الحجم ، دون تغيير حجم النافذة ، فيجب عليك استدعاء وظيفة setfooter () مرة أخرى.

قم بتشغيل المقتطف ثم ملء الشاشة لعرضه.

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
Sterner

أنا أكتب رمز تذييل لزجة مبسط مع الحشو باستخدام LESS. ربما تكون هذه الإجابة خارج الموضوع لأن السؤال لا يتحدث عن الحشو ، لذلك إذا كنت مهتمًا بالتحقق هذه المشاركة للحصول على مزيد من التفاصيل.

@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
Fred K

فيما يلي حل يستند إلى CSS للحصول على تذييل لاصق متغير الارتفاع استجابة بالكامل.
الميزة: تذييل الصفحة يسمح بارتفاع متغير ، حيث لم يعد الارتفاع بحاجة إلى ترميز ثابت في CSS.

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}
body > * {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
     -moz-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
body > nav + .container {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}



/* Reset CSS and some footer styling. Only needed on StackOverflow */
body {
  padding: 50px 0 0;
  margin: 0;
}
footer {
  background-color: #f8f8f8; 
  padding: 15px 0 5px; 
  border-top: 1px solid #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>

     <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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 id="navbar" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" 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>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Responsive sticky footer of any height</h1>
      </div>
      <p class="lead">You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.</p>
      
    </div>

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

وفي ما يلي SCSS (بادئة gulp/grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
1
Andrei Gheorghiu

بناءً على إجابة Jek-fdrv ، أضفت .on('resize', function() للتأكد من أنه يعمل على كل جهاز وكل دقة:

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

لا يبدو أن الإصدار الحالي من bootstrap يعمل مع هذه الوظيفة بعد الآن. إذا قمت بتنزيل مثال navbar-footer-navbar الخاص بهم وقمت بوضع كمية كبيرة من المحتوى في منطقة الجسم الرئيسية ، فسيتم تذييل الصفحة أسفل أسفل إطار العرض. انها ليست لزجة على الإطلاق.

1
CJ Catalano

تم حل هذه المشكلة عن طريق flexbox ، مرة واحدة وإلى الأبد:

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

HTML

<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;
}
1
Konstantin Schubert

لتلخيص كل هذه ، ما عليك سوى وضع شيء واحد في عقلك وهو أن كل شيء ما عدا تذييل الصفحة يجب أن يكون min-height: 100% أو أقل بقليل.

1
kshirish

استخدام flexbox هو أسهل طريقة وجدتها ، من اللاعبين CSS-tricks . هذا صحيح ، حيث يعمل عندما يكون المحتوى <100٪ من الصفحة و> 100٪ من الصفحة:

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

و CSS:

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

تجدر الإشارة إلى أن هذا النظام غير مناسب ، لذا فهو يعمل مع bootstrap وبدونه.

0
bustawin

هنا هو تذييل لزجة بسيطة جدا ونظيفة يمكنك استخدامها في التمهيد. مستجيبة تماما!

HTML

<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>

CSS

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

مثال: CodePen Demo

0
Gothburz

يمكنك ببساطة محاولة إضافة فصل دراسي على شريط التذييل:

navbar-fixed-bottom

ثم قم بإنشاء CSS باسم custom.css و نص حشوة مثل هذا ..

body { padding-bottom: 70px; }
0
Ikram - Ud - Daula

إذا كنت تريد استخدام بناء bootstrap في فصول تذييل الصفحة. يجب عليك أيضا كتابة بعض جافا سكريبت:

$(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>

هذا بالتأكيد ليس هو الحل الأفضل (بسبب JS التي يمكن تجنبها) ، لكنه يعمل دون أي مشاكل مع التداخل ، فمن السهل تنفيذه واستجابته (height غير مشفر في CSS).

0
jmarceli

بكلمات هامل وساس كل ما هو ضروري:

هامل لـ app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass لـ 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/examples/sticky-footer-navbar/

0
equivalent8
#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>
0
Gpak

مجرد استخدام المرن! تأكد من استخدام النص الأساسي والرئيسي في HTML الخاص بك وهو واحد من أفضل الحلول (إلا إذا كنت بحاجة إلى دعم IE9). لا يتطلب ارتفاع ثابت أو مماثلة.

هذا هو الموصى به ل تتحقق كذلك!

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

main {
    flex: 1 0 auto;
}
0
kentor