การล้างส่วนท้ายไปยังด้านล่างของหน้า twitter bootstrap

306

โดยทั่วไปฉันคุ้นเคยกับเทคนิคการล้างส่วนท้ายด้วย CSS

แต่ฉันมีปัญหาในการรับวิธีนี้ในการทำงานกับ bootstrap ของ Twitter เป็นไปได้มากที่สุดเนื่องจากการที่ bootstrap ของ Twitter นั้นตอบสนองโดยธรรมชาติ การใช้ bootstrap ของ Twitter ฉันไม่สามารถดึงส่วนท้ายเพื่อล้างข้อมูลไปที่ด้านล่างของหน้าโดยใช้วิธีการที่อธิบายไว้ในโพสต์บล็อกด้านบน

css  twitter-bootstrap  footer 
— Calvin Cheng
แหล่งที่มา
ก่อนที่จะทดสอบคำตอบทั้งหมดด้านล่างโปรดทราบว่า OP ต้องการให้มันทำงานกับ twitter bootstrap เนื่องจากไม่ใช่สิ่งที่ต้องทำ twitter bootstrap ทำงานร่วมกับ Jquery นั่นคือ Javascript ที่เปิดใช้งานหมายความว่าอย่างไรเพียงทดสอบคำตอบของฉัน: stackoverflow.com / คำถาม / 10099422 / …
— HenryW
4
ตัวอย่างเป็นทางการ: getbootstrap.com/examples/sticky-footer-navbar/ …
— ผู้ใช้
1
ลิงก์เสีย! ทุกคนสามารถแก้ไขลิงก์ตัวอย่างที่เป็นทางการได้ไหม?
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbarมันอาจกลายเป็นเวอร์ชั่นที่เก่ากว่าในอนาคตเนื่องจาก 4.0 ฉันเดา
— Ammad Khalid

คำตอบ:

324

พบว่าตัวอย่างข้อมูลที่นี่ทำงานได้ดีสำหรับ bootstrap

Html:

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

CSS:

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;
}
— ชวนยอง
แหล่งที่มา
นี่เป็นทางออกที่ดีที่สุดที่ฉันได้ลองมา ยอมรับสิ่งนี้เป็นคำตอบ
— Calvin Cheng
สวัสดีฉันใช้วิธีนี้ใช้งานได้ดี แต่ตอนนี้ฉันมีปัญหากับการแสดงหน้าบน iphone (ซูมหน้า) ความคิดใด ๆ ที่เป็นปัญหาคืออะไร? นี่คือรายละเอียดบางส่วน: stackoverflow.com/questions/18621090/…
— pupadupa
94
ในกรณีที่คุณได้อ่านคำตอบนี้และไม่ได้เลื่อนลงมามันก็คุ้มค่าที่จะดูคำตอบอื่น ๆ
— MattyW
4
โดยเฉพาะสิ่งนี้: stackoverflow.com/questions/10099422/…
— HenryW
1
นี่เป็นวิธีที่ดีที่สุดที่ฉันพบสำหรับ Bootstrap สำหรับการตอบสนองของอุปกรณ์อย่าลืมใช้ข้อความค้นหาสื่อเพื่ออัปเดตความสูง #main และ. footer สำหรับขนาดหน้าจอที่แตกต่างกัน
— SyntaxGoonoo
467

ตอนนี้รวมอยู่ใน Bootstrap 2.2.1 แล้ว

Bootstrap 3.x

ใช้ส่วนประกอบ navbar และเพิ่ม.navbar-fixed-bottomคลาส:

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

Bootstrap 4.x

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

อย่าลืมที่จะเพิ่มbody { padding-bottom: 70px; }หรือมิฉะนั้นอาจจะครอบคลุมเนื้อหาของหน้า

เอกสาร: http://getbootstrap.com/components/#navbar-fixed-bottom

— Sanon
แหล่งที่มา
35
@ChuanYeong navbar-static-bottomแต่น่าเสียดายที่ไม่มี
— Lawrence Woodman
25
@MikeCurry เขาไม่ได้ถามเกี่ยวกับส่วนท้ายแบบคงที่ แต่เป็นส่วนที่ "เติม" พื้นที่ว่างหากหน้าของคุณมีเนื้อหาไม่เพียงพอที่จะทำให้ส่วนท้ายอยู่ด้านล่าง หากส่วนท้ายของคุณให้ข้อมูลเท่านั้นผู้ที่ตายตัวจะใช้พื้นที่ที่มีค่าเท่านั้น
— rdlu
22
นี่ไม่ใช่ท้ายกระดาษเหนียวเพราะมันถูกใช้ตำแหน่ง: คงที่; ซึ่งไม่ถูกต้อง
— Furkat U.
9
ใช่วิธีนี้จะวูบวาบไปที่ด้านล่างของวิวพอร์ตไม่ใช่ด้านล่างของหน้า เช่นท้ายกระดาษสามารถมองเห็นได้เสมอ
— rism
3
ต้องลงคะแนนคำตอบเพราะมันทำให้เกิดความสับสน OP ไม่ต้องการท้ายกระดาษเหนียว
— HenryW
77

ตัวอย่างการใช้งานสำหรับ bootstrap ของ Twitter ไม่ใช่ Sticky FOOTER

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

รุ่นที่อัปเดตอยู่เสมอในกรณีที่ผู้ใช้เปิด devtools หรือปรับขนาดหน้าต่าง

<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
แถบเลื่อนจะปรากฏขึ้นหากเนื้อหาไม่เหมาะกับหน้าจอ

— HenryW
แหล่งที่มา
9
ใช่ฉันไปกับอันนี้ด้วย CSS บางครั้งอาจงี่เง่า ไม่ใช่ว่ามันเป็นไปไม่ได้ แต่การใช้งานทั่วไปอาจทำได้ยากและการแก้ไขสิ่งที่น่ารำคาญเช่นนี้ในรูปแบบของเราไม่ควรเดินทางไปแลกเปลี่ยนสแต็คการแก้ไขหลายส่วนการทดสอบข้ามเบราว์เซอร์และการยอมแพ้ในที่สุด เคล็ดลับ ใช่ฉันรู้สึกสกปรก แต่อย่างน้อยก็ใช้งานได้
— meecect
3
ทุกทางออกเดียวที่ฉันดูผิด นี่เป็นเพียงสิ่งเดียวที่ทำในสิ่งที่ควรทำ - ติดส่วนท้ายที่ด้านล่างของหน้าโดยไม่ปิดบังเนื้อหาใด ๆ หากเบราว์เซอร์มีการปรับขนาด
— เดฟ
13
มันไม่ทำงานอย่างเงียบ ๆ อย่างที่คาดไว้สำหรับฉันยังคงเป็นหนึ่งในคำตอบที่ดีกว่าฉันแก้ไขปัญหาของฉันโดยแทนที่$('#footer').height();ด้วย$('#footer').outerHeight();
— DarkMukke
3
คำตอบที่ดี! ฉันมีการดัดแปลงสองสามอย่างที่ฉันคิดว่าปรับปรุงได้ที่นี่: stackoverflow.com/a/36385654/8207
— Cory
6
คำตอบที่ดีที่สุดที่ฉันพบ หากคุณต้องการให้มันทำงานหลังจากปรับขนาดหน้าต่างเพียงแค่ใส่รหัสหลักจากคำตอบด้านใน$(window).resize(function() {//main code goes here});แล้วเรียกใช้$(window).resize();เพื่อตั้งค่าเมื่อโหลดหน้าเว็บ
— Szymon Sadło
36

นี่คือวิธีการใช้งานจากหน้าอย่างเป็นทางการ:

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

ฉันเพิ่งทดสอบตอนนี้และมันก็ยอดเยี่ยม! :)

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>

รหัส 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 !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;
    }
}
— Leniel Maccaferri
แหล่งที่มา
7
ขอบคุณสำหรับการโพสต์สิ่งนี้มันเป็นทางออกที่ดีที่สุด (ไม่พูดถึงสิ่งเดียวที่ใช้ได้) สำหรับโครงการของฉันและแน่นอนว่ามันดีที่มันมาจากโครงการโดยตรง
— คอรี W.
1
ฉันไม่รู้ว่าดีลคืออะไร แต่ฉันไม่สามารถใช้งานได้โดยไม่ต้องเพิ่มสโครลลงในหน้า ฉันสิ้นสุดการเปลี่ยน. wrapper CSS ดังนั้น min-height คือ "calc (100% - 120px)" โดยที่ 120px คือความสูงของส่วนท้ายของฉันและลบ <div id = "push"> </div> ออกจาก html เนื่องจากดูเหมือนว่าไม่ได้ทำอะไรนอกจากการเพิ่มความสูงไปยังหน้าที่ฉันไม่ต้องการ
— jammyman34
36

สำหรับSticky Footerเราใช้สองDIV'sใน HTML สำหรับเอฟเฟ็กต์footerขั้นพื้นฐาน เขียนแบบนี้:

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
— Sandeep
แหล่งที่มา
7
เขาบอกว่าเขาใช้ Twitter Bootstrap อะไรจะเป็นวิธีที่ง่ายที่สุดในการรวมสิ่งนี้เข้ากับ Bootstrap โดยไม่ต้องเขียน HTML ใหม่ทั้งหมด?
— Cody Gray
1
ถ้า OP ต้องการให้ได้ผล Sticky Footer เขาต้องเปลี่ยน MarkUp ของเขา
— sandeep
ขอบคุณ! นี่เป็นวิธีเดียวที่ใช้งานได้จริงสำหรับฉันในไซต์ ASP.NET MVC5 ที่ใช้ Bootstrap +1
— Yann Duran
19

ฉันพบว่าผสมผสาน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

— Maxim Shoustin
แหล่งที่มา
2
ทางออกที่ง่ายที่สุดและสง่างามที่สุด ระวังตัวเองที่บ้านต้มรหัส css ของคุณเองเพราะมันจะไม่ย้อนกลับเข้ากันได้กับ bootstrap
— 1-14x0r
ฉันใช้สิ่งนี้และมีปัญหากับ Android รุ่นเก่า (อาจจะใช่หรือไม่) กับหน้าเว็บที่สั้นกว่าหน้าจอ มิฉะนั้นมันจะทำงานได้ดีกับ FF, Chrome, IE11, iPhone, Nexus 7
— bnieland
สมบูรณ์แบบและเรียบง่ายมาก!
— ramires.cabral
18

ในbootstrap 4.3 เวอร์ชันล่าสุดสามารถทำได้โดยใช้.fixed-bottomคลาส 

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

นี่คือวิธีที่ฉันใช้กับส่วนท้าย: 

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

คุณสามารถหาข้อมูลเพิ่มเติมได้ในตำแหน่งเอกสารที่นี่

— Mohamed Ali JAMAOUI
แหล่งที่มา
1
ยังคงใช้งานได้กับเวอร์ชัน 4 อย่างเป็นทางการที่ปล่อยออกมา
— klewis
โปรดทราบว่าตัวอย่างที่getbootstrap.com/docs/4.1/examples/sticky-footerมีลักษณะความสูงบรรทัด = 60px ในองค์ประกอบส่วนท้าย สิ่งนี้ไม่เพียง แต่ไม่จำเป็นเท่านั้น แต่ยังป้องกันไม่ให้ส่วนท้ายทำงานอย่างถูกต้องหากเป็นองค์ประกอบหลักขององค์ประกอบ div หนึ่งรายการขึ้นไปซึ่งเป็นกรณีปกติ
— ScottyB
13

คำตอบของ HenryWนั้นดี แต่ฉันต้องการปรับแต่งเล็กน้อยเพื่อให้มันทำงานตามที่ฉันต้องการ โดยเฉพาะอย่างยิ่งต่อไปนี้ยังจัดการ:

  • หลีกเลี่ยงการ "jumpiness" ในการโหลดหน้าโดยการทำเครื่องหมายที่มองไม่เห็นและการตั้งค่าที่มองเห็นในจาวาสคริปต์
  • การจัดการกับเบราว์เซอร์จะปรับขนาดได้อย่างสวยงาม
  • นอกจากนี้การตั้งค่าส่วนท้ายสำรองหน้าถ้าเบราว์เซอร์มีขนาดเล็กลงและส่วนท้ายจะใหญ่กว่าหน้า
  • ฟังก์ชันปรับความสูง

นี่คือสิ่งที่ใช้ได้กับฉันด้วยการปรับแต่งเหล่านั้น:

HTML:

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

CSS:

#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;
});
— คอรี
แหล่งที่มา
11

สิ่งนี้ใช้ได้สำหรับฉันอย่างสมบูรณ์แบบ

เพิ่มคลาส navbar-fixed-bottom นี้ลงในท้ายกระดาษของคุณ

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

ฉันใช้มันแบบนี้:

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

และตั้งค่าให้ต่ำกว่าความกว้างเต็ม

แก้ไข: สิ่งนี้จะกำหนดส่วนท้ายให้มองเห็นได้ตลอดเวลาซึ่งเป็นสิ่งที่คุณต้องคำนึงถึง

— sp_omer
แหล่งที่มา
10

คุณต้องตัด.container-fluiddiv เพื่อให้ส่วนท้ายของคุณทำงานคุณยังขาดคุณสมบัติบางอย่างใน.wrapperชั้นเรียนของคุณ ลองสิ่งนี้:

ลบออกpadding-top:70pxจากbodyแท็กของคุณและรวมไว้ในของคุณ.container-fluidแทนเช่น:

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

เราต้องทำเช่นนี้เพราะการกดbodyลงเพื่อรองรับ navbar ท้ายสุดดันส่วนท้ายอีกเล็กน้อย (70px เพิ่มเติม) ผ่านวิวพอร์ตเพื่อให้เราได้แถบเลื่อน เราได้ผลลัพธ์ที่ดีกว่าในการผลักดัน.container-fluiddiv แทน

ต่อไปเราต้องลบ.wrapperคลาสออกจาก.container-fluiddiv ของคุณและตัด#maindiv ของคุณด้วย:

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

ส่วนท้ายของหลักสูตรของคุณจะต้องออกจาก.wrapperdiv ดังนั้นลบมันออกจาก `. Krapper div และวางไว้ข้างนอกเช่น:

<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;
   }
}
— Andres Ilich
แหล่งที่มา
9

นี่เป็นวิธีที่ถูกต้องในการทำด้วย Twitter Bootstrap และคลาส navbar-fixed-bottom ใหม่: (คุณไม่รู้ว่าใช้เวลานานแค่ไหนในการหาสิ่งนี้)

CSS:

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

HTML:

<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>
— เรกิสบี
แหล่งที่มา
9

ใช้โปรแกรมอรรถประโยชน์การทำงานแบบยืดหยุ่นที่มีอยู่ใน Bootstrap 4! นี่คือสิ่งที่ฉันได้รับจากการใช้ Bootstrap 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 เพื่อทำให้ div หลักเป็น flex container
  • .flex-column ใน div หลักเพื่อจัดเรียงรายการ flex ของคุณในคอลัมน์
  • min-height: 100vh ถึง div หลักไม่ว่าจะเป็นแอตทริบิวต์ style หรือใน CSS ของคุณเพื่อเติมวิวพอร์ตในแนวตั้ง
  • .flex-grow-1 บนคอนเทนเนอร์องค์ประกอบที่จะมีคอนเทนเนอร์เนื้อหาหลักใช้พื้นที่ทั้งหมดที่เหลืออยู่ในความสูงวิวพอร์ต
— EGhost57
แหล่งที่มา
แทนที่จะ min-height: 100vhใช้min-vh-100คลาสจาก Bootstrap สามารถใช้ได้
— ikonuk
วิธีนี้ใช้งานได้ดีรวมถึงคำแนะนำ min-vh-100 จาก @ikonuk
— TGR
4

ใช้ส่วนประกอบ navbar และเพิ่ม. navbar-fixed-bottom class:

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

เพิ่มร่างกาย 

  { padding-bottom: 70px; }
— Admin File3
แหล่งที่มา
3

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

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

จากนั้นคุณสามารถใช้ css เพื่อแทนที่คลาส bootstrap เพื่อปรับความสูงแบบอักษรและสี

    .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;
    }
— 1-14x0r
แหล่งที่มา
3

คุณสามารถใช้ 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();
    });
});
— DucCuong
แหล่งที่มา
2

คนเดียวที่ทำงานสำหรับฉัน!:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
— ริคาร์โด้
แหล่งที่มา
2

เทคนิคที่ง่ายที่สุดน่าจะใช้ Bootstrap navbar-static-bottomร่วมกับการตั้งค่า div คอนเทนเนอร์หลักด้วย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>
— แพนวังperawong
แหล่งที่มา
2

Bootstrap 3.6.6ทดสอบกับ

HTML

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

CSS

.footer {
  bottom: 0;
  position: absolute;
}
— DušanMaďar
แหล่งที่มา
1 
#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;
}
— Sharpless512
แหล่งที่มา
1

นี่คือวิธีแก้ปัญหาสำหรับ Bootstrap รุ่นล่าสุด (4.3 ณ เวลาที่เขียน) โดยใช้ Flexbox

HTML:

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

CSS:

html, body {
  height: 100%;
}

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

.wrapper {
  flex-grow: 1;
}

และตัวอย่าง codepen: https://codepen.io/tillytoby/pen/QPdomR

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

ตามตัวอย่าง Bootstrap 4.3ในกรณีที่คุณเสียสติเหมือนที่ฉันเคยทำนี่คือวิธีการใช้งานจริง:

  • ผู้ปกครองของส่วนท้ายทั้งหมดต้องมีheight: 100%( h-100ชั้น)
  • ผู้ปกครองโดยตรงของส่วนท้ายจะต้องมีdisplay: flex( d-flexชั้น)
  • ส่วนท้ายต้องมีmargin-top: auto( mt-autoคลาส)

ปัญหาคือว่าในกรอบการทำงานส่วนหน้าที่ทันสมัยเรามักจะมีห่อเพิ่มเติมรอบองค์ประกอบเหล่านี้

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

ดังนั้นเพื่อให้มันทำงานได้ฉันต้องเพิ่มคลาสลงในองค์ประกอบของ wrapper เหล่านี้: เพิ่มเติมh-100เลื่อนd-flexระดับหนึ่งลงและเลื่อนmt-autoระดับหนึ่งขึ้นจากส่วนท้าย (ดังนั้นจริงๆแล้วมันไม่ได้อยู่ในส่วนท้ายอีกต่อไป แต่ตาม<app-footer>ธรรมเนียมของฉันธาตุ).

— MrValueType
แหล่งที่มา
ฉันมีที่จะนำclass="h-100"ไปที่<html>แท็กเกินไป
— Kel Solaar
1

ใช้รหัสนี้ใน bootstrap มันใช้งานได้

<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>
— Sanjay
แหล่งที่มา
1

Bootstrap v4 + ทางออก

ต่อไปนี้เป็นโซลูชันที่ไม่ต้องคิดใหม่เกี่ยวกับโครงสร้าง HTML หรือ CSS trickery เพิ่มเติมที่เกี่ยวข้องกับการขยาย:

<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>อย่างมีประสิทธิภาพสั่งให้เติมพื้นที่แนวตั้งใด ๆ ที่เหลืออยู่ดังนั้นจำนวนความสูงในแนวตั้ง 100% ที่เราตั้งไว้ก่อนหน้านี้บน<body>แท็กของเรา

สาธิตการทำงานที่นี่: https://codepen.io/maxencemaire/pen/VwvyRQB

ดูhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ flexbox

— Kathandrax
แหล่งที่มา
h-100min-vh-100ชั้นไม่ทำงานอย่างถูกต้องก็จะดีกว่าการใช้งาน
— ikonuk
@ikonuk คุณหมายถึงอะไรโดย "ทำงานไม่ถูกต้อง"? กรุณาอธิบายอย่างละเอียด
— Kathandrax
เพราะh-100คลาสมักจะขึ้นอยู่กับความสูงขององค์ประกอบหลักและอาจไม่ทำงานในบางกรณี เนื่องจากเราต้องการส่วนท้ายที่ด้านล่างของวิวพอร์ตมันเป็นการดีที่จะใช้ความสูงวิวพอร์ต
— ikonuk
อีกครั้งกำหนด 'บางกรณี' min-widthข้อโต้แย้งของคุณเกี่ยวกับการพึ่งพาผู้ปกครองใช้เพียงเพื่อเดียวกัน นี่คือเหตุผลที่HTMLแท็กมีรหัสheight100% ตัวอย่างใช้งานได้และฉันไม่เห็นสาเหตุที่จะไม่ได้รับการสนับสนุนข้ามเบราว์เซอร์สำหรับheightคุณสมบัติCSSซึ่งท้ายที่สุดแล้วสิ่งที่ตัวอย่าง Bootstrap แปลเป็น
— Kathandrax
ฉันไม่ได้บอกว่าตัวอย่างของคุณใช้ไม่ได้ ไม่ใช่ทุกคนที่ใช้สไตล์ในHTMLแท็ก ในกรณีของฉันโซลูชันของคุณไม่ทำงานเนื่องจากฉันไม่ชอบใช้สไตล์ในHTMLแท็ก และฉันไม่ต้องการให้bodyแท็กขึ้นอยู่กับพาเรนต์อื่น แต่วิวพอร์ต คุณไม่ต้องใส่style="height:100%;"และh-100ในเวลาเดียวกัน การทำให้min-vh-100ร่างกายทำงานและใช้รหัสน้อยลง
— ikonuk
0

ดูเหมือนว่าheight:100%'โซ่' div#mainจะถูกหัก ลองเพิ่มheight:100%เข้าไปและนั่นอาจทำให้คุณใกล้ชิดกับเป้าหมายของคุณมากขึ้น

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

ที่นี่คุณจะพบแนวทางใน HAML ( http://haml.info ) พร้อม navbar ที่ด้านบนและส่วนท้ายที่ด้านล่างของหน้า:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
— ฮานเนส
แหล่งที่มา
คุณช่วยอธิบายเกี่ยวกับคำตอบของคุณได้ไหม? คำตอบแบบรหัสเท่านั้นที่จะหมดกำลังใจ
— Qix - MONICA ถูกยกเลิกเมื่อ
1
ตกลงคุณต้องการรู้อะไร
— Hannes
ฉันไม่จำเป็นต้องรู้ แต่ใครบางคนที่มาที่ไซต์นี้ในภายหลังอาจไม่รู้ว่าทำไมรหัสคำตอบของคุณถึงทำในสิ่งที่มันทำ
— Qix - MONICA ถูกยกเลิก
น่าจะเป็นฉันควรจะลบมัน ฉันเขียนคำนำใหม่ :)
— Hannes
0

ง่าย ๆ เข้าไว้.

footer {
  bottom: 0;
  position: absolute;
}

คุณอาจจะต้องมีการชดเชยความสูงของส่วนท้ายโดยการเพิ่มเทียบเท่ากับความสูงของส่วนท้ายไปmargin-bottombody

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

นี่คือตัวอย่างการใช้ css3:

CSS:

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

HTML:

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

ซอ

— ผู้มีชัย
แหล่งที่มา
0

อีกวิธีที่เป็นไปได้เพียงแค่ใช้คำสั่งสื่อ

@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;
    }
}
— GeorgeWL
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.