Twitter Bootstrap 3 Sticky Footer

204

ฉันใช้เฟรมเวิร์ก bootstrap ของ twitter มาระยะหนึ่งแล้วพวกเขาก็อัพเดตเป็น version 3 เร็ว ๆ นี้!

ฉันมีปัญหาในการติดท้ายท้ายกระดาษฉันใช้เทมเพลตเริ่มต้นที่จัดทำโดยเว็บไซต์ bootstrap twitter แต่ก็ยังไม่มีโชค

html  css  twitter-bootstrap  twitter-bootstrap-3 
— แบรดเฟล็ทเชอร์
แหล่งที่มา
31
ตัวอย่างเป็นทางการ: getbootstrap.com/examples/sticky-footer-navbar
— ptim
3
@memeLab ทำไมตัวอย่างอย่างเป็นทางการถึงไม่มีอะไรเกี่ยวกับส่วนต่างของร่างกาย: -60px หรือฉันคิดถึงมัน ...
— Ganders
เพิ่มCSS โซลูชันเดียวที่อนุญาตให้ความสูงของตัวแปรสำหรับส่วนท้ายของเหนียว เชื่อมโยงที่นี่เป็นคำตอบใหม่ซึ่งอยู่ที่ด้านล่างของหน้า
— เทา

คำตอบ:

193

เพียงเพิ่ม class navbar-fixed-bottom ไปที่ท้ายกระดาษของคุณ

<div class="footer navbar-fixed-bottom">
— จอน
แหล่งที่มา
32
สิ่งนี้ไม่เหมือนกับท้ายกระดาษเหนียว
— Yura Omelchuk
3
หากคุณมีส่วนหัวและส่วนท้ายแสดงว่าคุณมีพื้นที่บนอุปกรณ์มือถือหลวมเกินไป
— strattonn
4
@strattonn นั่นคือสิ่งที่สื่อแบบสอบถามมีไว้สำหรับ
— Jacob Raccuia
20
มันจะทำงานได้อย่างสมบูรณ์หากหน้าไม่จำเป็นต้องเลื่อน แต่ส่วนท้ายของส่วนทับซ้อนกับเนื้อหาเพิ่มเติมในหน้า มีวิธีแก้ปัญหาใดในเรื่องนี้? ขอบคุณ!
— Xplora
1
ไม่แน่ใจเกี่ยวกับปัญหาการทับซ้อน แต่การเพิ่มระยะขอบ / ช่องว่างภายในไม่สามารถแก้ไขปัญหาได้หรือไม่
— Jon
152

อ้างอิงถึงตัวอย่างส่วนท้ายของ 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

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

URL แบบเต็ม: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

— tkymtk
แหล่งที่มา
21
HTML & CSS ในตัวอย่างข้อความต่อท้ายแบบเป็นทางการตอนนี้ค่อนข้างแตกต่างจากที่อธิบายไว้ที่นี่เช่นไม่มีการใช้คำสั่ง 'wrap' อีกต่อไป
— IanB
52

นี่คือวิธีที่จะเพิ่มส่วนท้ายที่ไม่ต้องการ 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>
— anataliocs
แหล่งที่มา
4
ดีมากและรวดเร็ว สามารถตอบสนองได้เช่นกัน แต่มีความจำเป็นต้องเพิ่มพื้นที่เพิ่มเติมที่ด้านล่างของเนื้อหาหน้าเพื่อไม่ให้ส่วนท้ายถูกซ่อนไว้ พื้นที่ควรมีความสูงเท่ากับความสูงส่วนท้าย คุณสามารถแสดงวิธีการทำสิ่งที่ดีที่สุด? BTW "ไม่ต้องการ CSS ใด ๆ "เป็นเทคนิคที่ผิด มันควรจะเป็น"ไม่ต้องใช้ CSS เพิ่มเติมใด ๆ นอกเหนือจากการเรียน Bootstrap"
— ADTC
1
ฉันชอบที่นี่ใช้ประโยชน์จากสิ่งที่มีอยู่ใน bootstrap ฉันไม่สามารถหาคำตอบยอดนิยมอื่น ๆ ในการทำงาน แต่การวางในหน้าของฉันและแบมท้ายกระดาษเหนียว ขอบคุณ!
— haakon.io
34

นอกเหนือจาก CSS ที่คุณเพิ่งเพิ่มไปแล้วอย่าลืมว่าคุณต้องเพิ่มdiv divก่อนที่จะปิด wrap div

โครงสร้างพื้นฐานสำหรับ HTML คือ 

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

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

มุมมองสด
แก้ไขมุมมอง

— David Taiaroa
แหล่งที่มา
หากเนื้อหาของหน้าใหญ่กว่าจอแสดงผลที่มีอยู่ส่วนท้ายจะถูกกดลง ฉันต้องการให้ท้ายกระดาษติดกับด้านล่างจริงๆ (เช่น navbar-fixed-bottom)
— blueFast
เฮ้ @delavnog อยากได้ผลนี้สำหรับคุณไหม? codepen.io/panchroma/pen/wMXWpY บิตที่สำคัญสำหรับคุณคือ HTML ที่บรรทัด 647 และ CSS
— David Taiaroa
@delavnog ความคิดเดียวกันที่มีเนื้อหาน้อยที่สุดในหน้าcodepen.io/panchroma/pen/JGZKqy
— David Taiaroa
ขอบคุณมาก! ทีนี้ถ้าฉันได้ div หลักตรงกลางระหว่าง nav และ footer มันจะยอดเยี่ยม! แก้ไข codepen ของคุณ: codepen.io/anon/pen/rxKMaW (ฉันต้องเพิ่มระยะขอบให้กับร่างกายเพราะ nav กำลังกินส่วนบนของเนื้อหา)
— blueFast
@delavnog ต่อไปนี้เป็นจุดเริ่มต้นหากเนื้อหาหลักไม่สูงเกินไป มันจะใช้งานได้มากขึ้น แต่สำหรับเนื้อหาที่ยาวขึ้น: codepen.io/panchroma/pen/vLrXMq
— David Taiaroa
30

นี่เป็นรหัสย่อ Sticky Footerณ วันนี้เพราะพวกมันปรับปรุงประสิทธิภาพอยู่เสมอและนี่คือ GOOD:

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;
}
— Leniel Maccaferri
แหล่งที่มา
1
โซลูชั่นที่สมบูรณ์แบบ นั่นคือสิ่งที่ฉันกำลังมองหา
— Levimatt
1
น่าเสียดายที่ส่วนท้ายนี้มีขนาดคงที่ บางครั้งเมื่อส่วนท้ายเป็นแบบไดนามิกอาจใหญ่หรือเล็กกว่าความสูงเป็น css
— 23W
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
แหล่งที่มา
ฉันชอบความเรียบง่ายและมีประสิทธิภาพของคำตอบของคุณซึ่งโดยวิธีนี้เป็นคำตอบที่ชาญฉลาด คำตอบมากมายสำหรับปัญหาเดียวกันนั้นเต็มไปด้วยความหลอกลวงและสิ่งที่ซับซ้อน ขอบคุณชาย
— digitai
1
มันเป็นวิธีแก้ปัญหาครึ่งคุณยังต้องดูแลการทับซ้อนของเนื้อหาในหน้าของคุณหากคุณปรับขนาด
— Baldráni
@ Baldrániไม่มีวิธีการแบบเต็มซ้อนทับทำงานได้ดีถ้าคุณใช้แถว Bootstrap และคอลัมน์ในส่วนท้าย html (ซึ่งเป็นสิ่งที่คุณควรทำอย่างไร)
— Tino Mclaren
นี่ไม่ใช่ท้ายกระดาษเหนียว เป็นแถบนำทางด้านล่างคงที่ซึ่งเหมาะสำหรับเนื้อหา navbar เท่านั้นและทับเนื้อหาหน้าเว็บ
— ซิม
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;
}
— Zee
แหล่งที่มา
4
นี่ไม่ใช่วิธีแก้ปัญหาที่ดีเนื่องจากส่วนท้ายของคุณได้รับการแก้ไขซึ่งหมายความว่ามันทับซ้อนกับเนื้อหาของหน้าเว็บ (ถ้ามี) ลองเพิ่มสองสามsome text<br>บรรทัดก่อนท้ายกระดาษและขยายขนาดหน้าต่าง
— jmarceli
@ user2041318: อ๋อนั่นช่างน่ากลัว ... ขอบคุณที่ชี้เรื่องนี้ขึ้นมา
— เซบาสเตียน
สิ่งนี้ได้รับการแก้ไขตามความคิดเห็น jmarceli ส่วนท้ายไม่ได้รับการแก้ไขอีกต่อไป
— Zee
3

ตัวอย่างเหนียวไม่ทำงานสำหรับฉัน ทางออกของฉัน:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— Andi Giga
แหล่งที่มา
ง่าย CSS ดีแบบเก่า งานเสร็จแล้ว ฉันคิดว่ามันน่าแปลกใจที่ความเชื่อมั่นของคำตอบที่ได้รับการจัดอันดับสูงกว่านั้นเป็นอย่างไร Bootstrap ไม่ควรทำให้ชีวิตของเราง่ายขึ้นใช่ไหม 😂
— Kal
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

ตอบโดย OP:

เพิ่มลงในไฟล์ 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;
  }
}
— CodeCaster
แหล่งที่มา
2

ฉันต้องการท้ายกระดาษที่ยืดหยุ่นซึ่งเป็นสาเหตุที่ฉันมาที่นี่ คำตอบยอดนิยมทำให้ฉันไปในทิศทางที่ถูกต้อง

กระแส Bootstrap 3 css Sticky footer ปัจจุบัน (2 ต.ค. 16) (ขนาดคงที่) มีลักษณะดังนี้:

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

ตราบใดที่ส่วนท้ายมีขนาดคงที่ขอบล่างของร่างกายจะสร้างแรงผลักดันเพื่อให้กระเป๋าสำหรับส่วนท้ายนั่งในกรณีนี้ทั้งคู่ถูกตั้งค่าเป็น 60px แต่หากส่วนท้ายไม่ได้รับการแก้ไขและสูงกว่า 60px ก็จะครอบคลุมเนื้อหาของหน้าเว็บของคุณ

ทำให้มีความยืดหยุ่น: ลบ css body margin และ footer height จากนั้นเพิ่ม JavaScript เพื่อให้ได้ความสูงส่วนท้ายและตั้งค่าส่วนต่างของร่างกายด้านล่าง ทำด้วยฟังก์ชั่น 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

สิ่งนี้ได้รับการแก้ไขโดย 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>

CSS

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

.Site-content {
  flex: 1;
}
— คอนสแตนตินชูเบิร์ต
แหล่งที่มา
2

js ง่าย ๆ

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

ฉันเขียนโค้ดท้ายกระดาษที่เรียบง่ายด้วยการเติมโดยใช้ 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

จากคำตอบของ Jek-fdrvฉันได้เพิ่ม an .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

Bootstrap รุ่นปัจจุบันดูเหมือนจะไม่สามารถใช้งานได้กับฟังก์ชั่นนี้อีกต่อไป หากคุณดาวน์โหลดตัวอย่าง sticky-footer-navbar ของพวกเขาและวางเนื้อหาจำนวนมากในพื้นที่เนื้อหาหลักส่วนท้ายจะถูกผลักลงผ่านด้านล่างของวิวพอร์ต มันไม่เหนียวเลย

— CJ Catalano
แหล่งที่มา
1

นี่คือโซลูชันที่ใช้ CSS สำหรับส่วนท้ายของส่วนท้ายของตัวแปรที่มีความสูงตอบสนองอย่างสมบูรณ์
ข้อได้เปรียบ:ส่วนท้ายช่วยให้ความสูงผันแปรได้เนื่องจากความสูงไม่จำเป็นต้องกำหนดค่าตายตัวอีกต่อไปใน CSS

แสดงตัวอย่างโค้ด

และนี่คือคำนำหน้าSCSS(สำหรับgulp/ grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
— เต่า
แหล่งที่มา
1

แค่ใช้เฟล็กซ์! ตรวจสอบให้แน่ใจว่าใช้เนื้อหาและหลักใน HTML ของคุณและเป็นหนึ่งในโซลูชันที่ดีที่สุด (เว้นแต่คุณต้องการการสนับสนุน IE9) มันไม่จำเป็นต้องมีความสูงคงที่หรือคล้ายกัน

แนะนำให้ใช้กับ Materialize ด้วย!

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

main {
    flex: 1 0 auto;
}
— Kentor
แหล่งที่มา
0

ในคำพูดของ Haml & Sass ทั้งหมดที่จำเป็น:

Haml สำหรับ 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/

— equivalent8
แหล่งที่มา
0

หากคุณไม่ต้องการใช้ bootstrap build ในคลาสสำหรับส่วนท้าย คุณควรเขียนจาวาสคริปต์ด้วย:

$(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 เช่นนั้น:

<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ไม่ใช่ hardcoded ใน CSS)

— 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

นี่คือท้ายกระดาษเหนียวที่เรียบง่ายและสะอาดมากคุณสามารถใช้ใน bootstrap ตอบสนองโดยสิ้นเชิง!

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

— Gothburz
แหล่งที่มา
วิธีนี้จะเลื่อนแถบส่วนท้ายไปทางขวาเมื่อเปิด bootstrap modal เนื่องจากการจัดตำแหน่งที่แน่นอน!
— thethakuri
0

ใช้flexboxเป็นวิธีที่ง่ายที่สุดที่ฉันได้พบจากพวกของCSS เทคนิค นี่เป็นส่วนท้ายที่แท้จริงของมันทำงานเมื่อเนื้อหาเป็น <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-agnostic ดังนั้นจึงใช้งานได้กับ bootstrap และไม่มี

— bustawin
แหล่งที่มา
0

คุณสามารถลองเพิ่มคลาสบนแถบนำทางส่วนท้ายของคุณ:

navbar-fixed-bottom

จากนั้นสร้าง CSS ชื่อcustom.cssและการเติมร่างกายแบบนี้ ..

body { padding-bottom: 70px; }
— Ikram - Ud - Daula
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.