Bootstrap 3 ท้ายส่วนท้ายไปด้านล่าง ไม่ได้รับการแก้ไข

177

ฉันใช้ Bootstrap 3 สำหรับเว็บไซต์ที่ฉันออกแบบ

ฉันต้องการมีส่วนท้ายเหมือนตัวอย่างนี้ ตัวอย่าง

โปรดทราบว่าฉันไม่ต้องการให้แก้ไขเพื่อให้ bootstrap navbar-fixed-bottom ไม่สามารถแก้ปัญหาของฉันได้ ฉันแค่อยากให้มันอยู่ด้านล่างสุดของเนื้อหาเสมอและตอบสนองได้ดี

คำแนะนำใด ๆ ที่จะได้รับการชื่นชมอย่างมาก

แก้ไข:

ขออภัยถ้าฉันไม่ชัดเจน สิ่งที่เกิดขึ้นตอนนี้คือเมื่อเนื้อหาเนื้อหาไม่มีเนื้อหาเพียงพอ ส่วนท้ายของฉันขยับขึ้นและจากนั้นก็ปล่อยให้มีพื้นที่ว่างเปล่าที่ด้านล่าง

นี่คือสิ่งที่ฉันมีตอนนี้สำหรับ navbar ของฉัน

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

— user3169403
แหล่งที่มา

คุณมีรหัสตัวอย่างที่คุณใช้อยู่ซึ่งกำลังทำให้คุณมีปัญหาหรือไม่

— badAdviceGuy

ดูเหมือนว่าท้ายกระดาษปกติถ้าคุณไม่ต้องการแก้ไขคุณสามารถอัพเดตสไตล์ได้ คุณกำลังเจอปัญหาอะไร

— กลายเป็น

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

— Joe Conlin

stackoverflow.com/questions/643879/…

— davidpauljunior

@davidpauljunior: นั่นคือท้ายกระดาษเหนียวซึ่งไม่ใช่สิ่งที่ฉันกำลังมองหา

— user3169403

124

ดูตัวอย่างด้านล่าง วิธีนี้จะวางตำแหน่งส่วนท้ายของคุณให้ติดกับด้านล่างหากหน้ามีเนื้อหาน้อยลงและทำงานเหมือนส่วนท้ายปกติหากหน้านั้นมีเนื้อหามากขึ้น

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

UPDATE : Bootstrap เวอร์ชั่นใหม่สาธิตวิธีการเพิ่มส่วนท้ายของกระดาษกาวโดยไม่ต้องใส่แผ่นปิด โปรดดูคำตอบ Jboy Flaga สำหรับรายละเอียดเพิ่มเติม

— Surjith SM
แหล่งที่มา

ลิงก์ของคุณเสีย

— Halter

2

เหตุใดจึงมีข้อกำหนดคุณสมบัติความสูงสองรายการใน wrapper

— แทบจะไม่สามารถประกาศ

@HardlyNoticeable one มีความกว้างต่ำสุดเพื่อบังคับให้ wrapper แม้ว่าเนื้อหาจะน้อยกว่า

— Surjith SM

ยังคงสงสัยว่าทำไมมีคำจำกัดความคุณสมบัติของความสูงสองประการ คุณไม่ได้ตอบ @SurjithSM

— Erowlin

@Erowlin นั่นเป็นข้อผิดพลาด คุณไม่ต้องการคุณสมบัติความสูงสองอย่าง มีเพียงความสูงขั้นต่ำเท่านั้นจึงจะเพียงพอแก้ไขคำตอบ

— Surjith SM

316

มีวิธีแก้ไขที่ง่ายจาก bootstrap ที่นี่ (ซึ่งคุณไม่จำเป็นต้องสร้างคลาสใหม่): http://getbootstrap.com/examples/sticky-footer-navbar/

เมื่อคุณเปิดหน้านั้นให้คลิกขวาที่เบราว์เซอร์และ "ดูแหล่งที่มา" และเปิดไฟล์ sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar css )

คุณจะเห็นว่าคุณต้องการ 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;
}

สำหรับ HTML นี้

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

— Jboy Flaga
แหล่งที่มา

19

(จากเอกสาร Bootstrap / ตัวอย่าง) นี้ควรเป็นคำตอบที่ยอมรับได้

— richardm

5

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

— NightMICU

9

นี่ไม่ใช่วิธีการแก้ปัญหาท้ายกระดาษ Bootstraps? ฉันไม่คิดว่า OP หมายถึงสิ่งนี้ สำหรับฉันด้วยหน้ายาวส่วนท้ายของฉันปรากฏที่ด้านล่างของหน้าจอ แต่ไม่ได้อยู่ที่ด้านล่างของเนื้อหา (เช่นเหนือเนื้อหา) ฉันต้องเปลี่ยนตำแหน่ง: แน่นอน; เพื่อญาติ (ในคลาส. footer) เพื่อให้สิ่งนี้ใช้ได้

— Tino Mclaren

24

นี้จะเป็นคำตอบที่ถูกต้องหากเรื่องนี้ไม่ได้ "ไม่คงที่" อยู่ในชื่อ ...

— ruudy

1

ใช้งานได้เฉพาะกับส่วนท้ายที่มีขนาดคงที่ฉันชอบวิธีการแก้ปัญหาของ Philip Walton ตามที่เสนอโดย @ChristopherTan ซึ่งบางเฉียบและเป็นอิสระจากส่วนสูงของส่วนท้าย

— buergi

16

ใช้ flexbox ตามที่คุณสามารถใช้ได้เมื่อต้องการ โซลูชันที่นำเสนอโดย bootstrap 4 ยังคงค้นหาเนื้อหาที่ทับซ้อนกันในรูปแบบที่ตอบสนองเช่น: มันจะแตกในมุมมองมือถือฉันเจอเคล็ดลับที่ประณีตที่สุดคือใช้การสาธิตโซลูชัน flexbox ที่แสดงที่นี่ :( https://philipwalton.github.io / modified-by-flexbox / demos / sticky-footer / ) วิธีนี้เราไม่ต้องจัดการกับปัญหาความสูงคงที่ซึ่งเป็นทางออกที่ล้าสมัยแล้วในตอนนี้ ... วิธีนี้ใช้ได้กับ bootstrap 3 และ 4 แล้วแต่ว่าคุณจะใช้งานแบบไหน

<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

นี่เป็นทางออกที่ฉลาดมาก ฉันคิดว่า CSS มีอะไรมากเกินกว่าที่จะเสนอที่เราไม่รู้ด้วยซ้ำว่าจะได้รับประโยชน์สูงสุดจากมัน

— Gilbert

2

ฉันรักทางออกนี้ น่าอัศจรรย์

— Bagus Aji Santoso

14

ปรับปรุง: นี่ไม่ได้ตอบคำถามโดยตรงทั้งหมด แต่คนอื่น ๆ อาจพบว่ามีประโยชน์

นี่คือ HTML สำหรับส่วนท้ายที่ตอบสนองของคุณ

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

สำหรับ CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

หมายเหตุ:ในช่วงเวลาของการโพสต์สำหรับคำถามนี้บรรทัดของโค้ดด้านบนไม่ได้กดส่วนท้ายด้านล่างเนื้อหาของหน้า; แต่จะทำให้ส่วนท้ายของคุณรวบรวมข้อมูลตรงกลางหน้าเมื่อมีเนื้อหาเล็กน้อยในหน้า สำหรับตัวอย่างที่กดท้ายกระดาษด้านล่างเนื้อหาของหน้าลองดูที่นี่http://getbootstrap.com/examples/sticky-footer/

— Rex CoolCode Charles
แหล่งที่มา

นี่เป็นวิธีแก้ปัญหาที่ไม่ดีเนื่องจากส่วนท้ายครอบคลุมเนื้อหาหลักเมื่อพบกัน คุณต้องตั้งค่าpadding-bottomของคอนเทนเนอร์เนื้อหาหลักเท่ากับความสูงของส่วนท้าย และคุณต้องทำมันแบบไดนามิกในหน้าloadและเหตุการณ์ที่เกิดขึ้นและยังอยู่ในส่วนท้ายresize DOMSubtreeModified

— เทา

9

สำหรับคนที่ยังคงดิ้นรนและวิธีแก้ปัญหาที่ได้รับการตอบกลับไม่ได้ผลอย่างที่คุณต้องการนี่เป็นวิธีแก้ปัญหาที่ง่ายที่สุดที่ฉันพบ

ล้อมเนื้อหาหลักของคุณและกำหนดความสูงในการดู ปรับ 60 ให้เหมาะกับความต้องการของคุณ

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

นั่นมันและทำงานได้ค่อนข้างดี

— eGlu
แหล่งที่มา

ฉันมีปัญหาเช่นเดียวกับที่เป็นปัญหา หลังจากลองคำตอบที่ได้รับการจัดอันดับสูงเกือบทั้งหมดแล้วนี่เป็นคำตอบเดียวที่เหมาะกับฉัน และมันใช้ได้กับทุกขนาด การเปลี่ยนแปลงที่ฉันทำเท่านั้นคือ "ความสูงขั้นต่ำ: 70vh" สิ่งนี้จะขึ้นอยู่กับขนาดส่วนหัวและส่วนท้ายของเว็บไซต์ของคุณ

— Arfath

ควรสูงกว่านี้ทำงานเหมือนที่ร้องขอ

— มันเทศ

สิ่งนี้ใช้ได้กับความต้องการของฉัน เพียงแค่ปรับค่าความสูงขั้นต่ำจนกว่าคุณจะได้ผลลัพธ์ที่ต้องการ

— sawyerrken

ยอดเยี่ยมนี่เป็นวิธีที่ง่ายและมีประสิทธิภาพในการแก้ปัญหาการวางท้ายที่สุด!

— Prahlad Yeri

5

Galen Gidman ได้โพสต์วิธีแก้ปัญหาที่ดีจริงๆให้กับปัญหาของท้ายกระดาษตอบสนองที่ไม่มีความสูงคงที่ คุณสามารถค้นหาโซลูชันทั้งหมดของเขาได้ที่บล็อกของเขา: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

— weiy
แหล่งที่มา

ดูเหมือนว่าจะเข้ากันได้กับ bootstrap และด้วยเหตุนี้ควรเป็นคำตอบที่ยอมรับได้ imho มันไม่สมบูรณ์แบบเนื่องจากแถบเลื่อนแนวนอนดูเหมือนจะปรากฏขึ้น

— Florian Mertens

Florian: ไม่มีแถบเลื่อนแนวนอนสำหรับฉัน

— แทบไม่ได้ประกาศ

4

สำหรับการแก้ปัญหาบริสุทธิ์ CSS <hr>เลื่อนหลังที่ 2 คำตอบแรกคือคำตอบเริ่มต้น (ให้กลับในปี 2559)

ข้อบกพร่องที่สำคัญของการแก้ปัญหาข้างต้นคือมีความสูงคงที่สำหรับส่วนท้าย
และนั่นก็ไม่ได้ตัดออกในโลกแห่งความเป็นจริงที่ซึ่งผู้คนใช้อุปกรณ์เป็นล้าน ๆ ตัวและมีนิสัยที่ไม่ดีในการหมุนพวกมันเมื่อคุณคาดหวังอย่างน้อยที่สุดและ** Poof! ** มีเนื้อหาหน้าเว็บของคุณอยู่ด้านหลังส่วนท้าย!

ในโลกแห่งความเป็นจริงคุณต้องการฟังก์ชั่นที่คำนวณความสูงของส่วนท้ายและปรับเนื้อหาของหน้าเว็บแบบไดนามิกpadding-bottomเพื่อรองรับความสูงนั้น และคุณจำเป็นต้องเรียกใช้ฟังก์ชั่นเล็ก ๆ นี้ในหน้าloadและresizeเหตุการณ์รวมถึงส่วนท้ายDOMSubtreeModified(ในกรณีที่ส่วนท้ายของคุณได้รับการปรับปรุงแบบอะซิงโครนัสแบบไดนามิกหรือมีองค์ประกอบภาพเคลื่อนไหวที่เปลี่ยนขนาดเมื่อมีปฏิสัมพันธ์)

ต่อไปนี้เป็นข้อพิสูจน์แนวคิดโดยใช้ jQuery v3.0.0และ Bootstrap v4-alphaแต่ไม่มีเหตุผลว่าทำไมมันจึงไม่ควรทำงานในแต่ละเวอร์ชันที่ต่ำกว่า

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

jQuery(document).ready(function($) {
  $.fn.accomodateFooter = function() {
    var footerHeight = $('footer').outerHeight();
    $(this).css({
      'padding-bottom': footerHeight + 'px'
    });
  }
  $('footer').on('DOMSubtreeModified', function() {
    $('body').accomodateFooter();
  })
  $(window).on('resize', function() {
    $('body').accomodateFooter();
  })
  $('body').accomodateFooter();
  window.addMoreContentToFooter = function() {
    var f = $('footer');
    f.append($('<p />', {
        text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
      }))
      .append($('<hr />'));
  }
});

body {
  min-height: 100vh;
  position: relative;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.5rem;
  display: block;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}

<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://v4-alpha.getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="container">
  <div class="starter-template">
    <h1>Feed that footer - not a game (yet!)</h1>
    <p class="lead">You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button>
    <hr />
    <blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.0.0</code> and Bootstrap <code>v4-alpha</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
  </div>
</div>

<footer>I am a footer with dynamic content.
  <hr />
</footer>

ขยายตัวอย่างข้อมูล

เริ่มแรกฉันได้โพสต์โซลูชันนี้ที่นี่แต่ฉันรู้ว่ามันอาจช่วยให้ผู้คนจำนวนมากขึ้นหากโพสต์ภายใต้คำถามนี้

หมายเหตุ:ฉันตั้งใจจะห่อ$([selector]).accomodateFooter()เป็นปลั๊กอิน jQuery ดังนั้นจึงสามารถเรียกใช้ในองค์ประกอบ DOM ใด ๆ ในรูปแบบส่วนใหญ่มันไม่ได้เป็น$('body')ของbottom-paddingที่ต้องมีการปรับ แต่องค์ประกอบห่อหน้าด้วยposition:relative(โดยปกติจะเป็นผู้ปกครองทันทีfooter) .

แก้ไขในภายหลัง (3+ ปีหลังจากคำตอบเบื้องต้น):

ณ จุดนี้ฉันไม่คิดว่าจะยอมรับได้โดยใช้ JavaScript สำหรับการวางตำแหน่งส่วนท้ายเนื้อหาแบบไดนามิกที่ด้านล่างของหน้า สามารถทำได้ด้วย CSS เพียงอย่างเดียวโดยใช้เฟล็กบ็อกซ์ฟ้าแลบเร็วข้ามเบราว์เซอร์

นี่มันคือ:

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

// Left this in so you could inject content into the footer and test it:
// (but it's no longer sizing the footer)

function addMoreContentToFooter() {
  var f = $('footer');
  f.append($('<p />', {
      text: "Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."
    }))
    .append($('<hr />'));
}

.wrapper {
  min-height: 100vh;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
}

.wrapper>* {
  flex-grow: 0;
}

.wrapper>main {
  flex-grow: 1;
}

footer {
  background-color: rgba(0, 0, 0, .65);
  color: white;
  width: 100%;
  padding: 1.5rem;
}

footer hr {
  border-top: 1px solid rgba(0, 0, 0, .42);
  border-bottom: 1px solid rgba(255, 255, 255, .21);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="wrapper">
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  <main>
    <div class="container">
      <div class="starter-template">
        <h1>Feed that footer - not a game (yet!)</h1>
        <p class="lead">Footer won't ever cover the body contents, as its not fixed. It's simply placed at the bottom when the page should be shorter using `min-height:100vh` on container and using flexbox to push it down.</p><button class="btn btn-warning" onclick="addMoreContentToFooter()">Feed that footer</button>
        <hr />
        <blockquote class="lead">
          <strong>Note:</strong> This example uses current latest versions of jQuery (<code>3.4.1.slim</code>) and Bootstrap (<code>4.4.1</code>) (unlike the one above).
        </blockquote>
      </div>
    </div>
  </main>
  <footer>I am a footer with dynamic content.
    <hr />
  </footer>
</div>

ขยายตัวอย่างข้อมูล

— เต่า
แหล่งที่มา

3

วิธีนี้ใช้มาร์กอัปน้อยที่สุด เพียงใส่เนื้อหาทั้งหมดของคุณใน. wrapper ซึ่งมี padding-bottom และลบ margin ล่างเท่ากับความสูงส่วนท้าย (ในตัวอย่างของฉัน 100px)

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>

— Vin
แหล่งที่มา

2

หรือสิ่งนี้

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>

— AnBisw
แหล่งที่มา

1

สำหรับ Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

— shilovk
แหล่งที่มา

2

คำถามที่ระบุโดยเฉพาะว่าnavbar-fixed-bottomไม่ใช่สิ่งที่แก้ปัญหา

— p4sh4

1

ไม่มีวิธีแก้ปัญหาใดที่เหมาะกับฉันอย่างสมบูรณ์เพราะฉันใช้คลาส navbar-inverse ในส่วนท้ายของฉัน แต่ฉันได้รับโซลูชันที่ใช้งานได้และปราศจาก Javascript ใช้ Chrome เพื่อช่วยในการสร้างแบบสอบถามสื่อ ความสูงของส่วนท้ายของการเปลี่ยนแปลงเมื่อหน้าจอปรับขนาดดังนั้นคุณต้องใส่ใจกับสิ่งนั้นและปรับตามความเหมาะสม เนื้อหาส่วนท้ายของคุณ (ฉันตั้ง id = "ส่วนท้าย" เพื่อกำหนดเนื้อหาของฉัน) ควรใช้ postion = absolute และ bottom = 0 เพื่อให้อยู่ด้านล่าง ความกว้าง: 100% นี่คือ CSS ของฉันที่มีคำสั่งสื่อ คุณจะต้องปรับความกว้างขั้นต่ำและความกว้างสูงสุดและเพิ่มหรือลบองค์ประกอบบางอย่าง:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}

— Brian Edwards
แหล่งที่มา

0

นี่คือสิ่งที่ฉันใช้Flexbox ได้ :

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

.body-content {
    flex: 1 0 auto;
    width: 100%;
}

.footer {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    flex: none;
}

ที่มา: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

— Leniel Maccaferri
แหล่งที่มา