Chân trang tuôn ra đến cuối trang, twitter bootstrap

306

Tôi thường quen thuộc với kỹ thuật xả chân trang bằng css.

Nhưng tôi gặp một số khó khăn khi phương pháp này hoạt động cho bootstrap Twitter, rất có thể là do thực tế là bootstrap Twitter có bản chất đáp ứng. Sử dụng Twitter bootstrap Tôi không thể làm cho phần chân trang tuôn xuống cuối trang bằng cách sử dụng phương pháp được mô tả trong bài đăng trên blog.

css  twitter-bootstrap  footer 
— Calvin Cheng
nguồn
Trước khi kiểm tra tất cả các câu trả lời bên dưới, hãy nhớ rằng OP muốn nó hoạt động với twitter bootstrap. Không phải vậy, twitter bootstrap hoạt động với Jquery, có nghĩa là nó được kích hoạt Javascript. Vì lý do đó chỉ cần kiểm tra câu trả lời của tôi: stackoverflow.com / câu hỏi / 10099422 / Hoài
— HenryW
4
— người dùng
1
Liên kết bị hỏng! Bất cứ ai có thể xin vui lòng sửa các liên kết ví dụ chính thức?
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar nó có thể trở thành phiên bản cũ hơn trong tương lai vì 4.0 tôi đoán.
— Ammad Khalid

Câu trả lời:

324

Tìm thấy đoạn trích ở đây hoạt động thực sự tốt cho 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;
}
— Luân Luân
nguồn
Đây là giải pháp tốt nhất tôi đã cố gắng cho đến nay. Chấp nhận điều này như câu trả lời.
— Calvin Cheng
Xin chào, tôi đã thực hiện phương pháp này, nó hoạt động rất tốt nhưng bây giờ tôi gặp một số vấn đề với việc hiển thị trang trên iphone (trang được phóng to). Bất kỳ ý tưởng vấn đề là gì? Dưới đây là một số chi tiết: stackoverflow.com/questions/18621090/ từ
— Pupadupa
94
Chỉ trong trường hợp bạn đã đọc câu trả lời này và không cuộn xuống, nó đáng để xem các câu trả lời khác
— MattyW
4
đặc biệt là cái này: stackoverflow.com/questions/10099422/ từ
— HenryW
1
Đây là phương pháp tốt nhất tôi đã tìm thấy cho Bootstrap. Để đáp ứng thiết bị, hãy nhớ sử dụng truy vấn phương tiện để cập nhật chiều cao #main và .footer cho các kích thước màn hình khác nhau
— SyntaxGoonoo
467

Điều này hiện được bao gồm với Bootstrap 2.2.1.

Bootstrap 3.x

Sử dụng thành phần thanh điều hướng và thêm .navbar-fixed-bottomlớp:

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

Bootstrap 4.x

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

Đừng quên thêm body { padding-bottom: 70px; }hoặc nếu không nội dung trang có thể được bảo hiểm.

Tài liệu: http://getbootstrap.com/components/#navbar-fixed-bottom

— sanon
nguồn
35
@ChuanYeong Thật không may là không có navbar-static-bottom.
— Lawrence Woodman
25
@MikeCurry anh ấy không hỏi về chân trang cố định, nhưng một cái "lấp đầy" khoảng trống, nếu trang của bạn không có đủ nội dung để làm chân trang ở dưới cùng. Nếu chân trang của bạn chỉ là thông tin, thì một cái cố định chỉ chiếm không gian có giá trị.
— ndlu
22
Đây không phải là chân trang dính, bởi vì nó được sử dụng vị trí: cố định; Điều đó không đúng
— Furkat U.
9
Yep giải pháp này chỉ tuôn ra ở dưới cùng của chế độ xem chứ không phải dưới cùng của trang. tức là phần chân trang luôn được nhìn thấy.
— nghĩa
3
Phải bỏ qua câu trả lời vì nó gây nhầm lẫn. OP không muốn một footer dính.
— HenryW
77

Một ví dụ hoạt động cho Twitter bootstrap KHÔNG 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>

Phiên bản luôn cập nhật trong trường hợp người dùng mở devtools hoặc thay đổi kích thước cửa sổ.

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

Bạn cần ít nhất một yếu tố với một #footer

Khi không muốn thanh cuộn nếu nội dung phù hợp với màn hình, chỉ cần thay đổi giá trị từ 10 thành 0
Thanh cuộn sẽ hiển thị nếu nội dung không vừa với màn hình.

— HenryW
nguồn
9
Vâng, tôi cũng đã đi với cái này CSS đôi khi có thể rất ngu ngốc. Không phải là không thể, nhưng các giải pháp cho mục đích chung có thể khó thực hiện và khắc phục những điều gây phiền nhiễu như thế này trong bố cục của chúng tôi không nên thực hiện các chuyến đi để trao đổi ngăn xếp, sửa đổi nhiều ý chính, kiểm tra chéo và đầu hàng cuối cùng cho một JS đơn giản lừa. Vâng, tôi cảm thấy một chút bẩn, nhưng ít nhất nó hoạt động.
— meecect
3
mỗi giải pháp tôi đã xem là sai. Đây là DUY NHẤT thực sự làm những gì nó phải làm - dán chân trang xuống cuối trang, mà không làm mờ bất kỳ nội dung nào nếu trình duyệt bị thay đổi kích thước.
— Dave
13
nó không hoạt động yên tĩnh như mong đợi đối với tôi, tuy nhiên, một trong những câu trả lời tốt hơn, tôi đã khắc phục vấn đề của mình bằng cách thay thế $('#footer').height();bằng$('#footer').outerHeight();
— DarkMukke
3
Câu trả lời chính xác! Tôi đã có một vài điều chỉnh mà tôi nghĩ là cải thiện nó ở đây: stackoverflow.com/a/36385654/8207
— Cory
6
Câu trả lời tốt nhất tôi đã tìm thấy. Nếu bạn muốn nó hoạt động sau khi thay đổi kích thước cửa sổ, chỉ cần đặt mã chính từ câu trả lời bên trong $(window).resize(function() {//main code goes here});và gọi $(window).resize();để đặt nó khi tải trang.
— Szymon Sadło
36

Đây là cách thực hiện điều này từ trang chính thức:

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

Tôi vừa thử nó ngay bây giờ và nó hoạt động TUYỆT VỜI! :)

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>

Mã CSS có liên quan là đây:

/* 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
nguồn
7
Cảm ơn bạn đã đăng bài này, đây chắc chắn là giải pháp tốt nhất (không đề cập đến giải pháp duy nhất hiệu quả) cho dự án cụ thể của tôi, và tất nhiên thật tuyệt khi nó trực tiếp từ chính dự án.
— Cory W.
1
Tôi không biết thỏa thuận này là gì, nhưng tôi không thể làm cho nó hoạt động mà không thêm cuộn vào các trang. Cuối cùng tôi đã thay đổi CSS .wrapper để chiều cao tối thiểu là "calc (100% - 120px)" trong đó 120px là chiều cao của chân trang của tôi và xóa <div id = "push"> </ div> khỏi html vì nó dường như không làm gì ngoài việc thêm chiều cao vào trang mà tôi không cần.
— jammyman34
36

Đối với Foot Footer, chúng tôi sử dụng hai DIV'strong HTML cho hiệu ứng chân trang cơ bản . Viết như thế này:

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
— máy quét cát
nguồn
7
Anh ấy nói anh ấy đang sử dụng Twitter Bootstrap. Điều gì sẽ là cách dễ nhất để tích hợp điều này vào Bootstrap mà không cần viết lại hoàn toàn HTML?
— Cody Grey
1
Nếu OP muốn đạt được hiệu ứng Chú ý chân thì anh ta phải thay đổi MarkUp của mình
— sandeep
Cảm ơn bạn! Đây là phương pháp duy nhất thực sự hiệu quả với tôi trong một trang web ASP.NET MVC5 sử dụng Bootstrap. +1
— Yann Duran
19

Vâng, tôi tìm thấy sự pha trộn của navbar-innervà 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>

Nó có vẻ tốt và làm việc cho tôi

nhập mô tả hình ảnh ở đây

Xem ví dụ trong Fiddle

— Maxim Shoustin
nguồn
2
giải pháp đơn giản và thanh lịch nhất. Hãy cẩn thận với việc pha mã css của riêng bạn vì nó sẽ không tương thích ngược với bootstrap
— 1-14x0r
Tôi đã sử dụng điều này và gặp sự cố trên một Android cũ (có thể là gì?) Với các trang ngắn hơn màn hình.
— Mặt
Hoàn hảo và cực kỳ đơn giản!
— ramires.cabral
18

Trong phiên bản mới nhất của bootstrap 4.3, điều này có thể được thực hiện bằng cách sử dụng .fixed-bottomlớp. 

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

Đây là cách tôi sử dụng nó với chân trang: 

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

Bạn có thể tìm thêm thông tin trong tài liệu vị trí ở đây .

— Mohamed Ali JAMAOUI
nguồn
1
Điều này vẫn hoạt động với phiên bản 4 chính thức được tung ra.
— klewis
Lưu ý rằng ví dụ tại getbootstrap.com/docs/4.1/examples/sticky-footer có kiểu line-height = 60px trên phần tử chân trang. Điều này không chỉ không cần thiết, nó còn ngăn chân trang hoạt động bình thường nếu đó là cha mẹ của một hoặc nhiều phần tử div, thường là trường hợp.
— ScottyB
13

Câu trả lời của HenryW là tốt, mặc dù tôi cần một vài điều chỉnh để khiến nó hoạt động như tôi muốn. Đặc biệt, sau đây cũng xử lý:

  • Tránh "tăng vọt" khi tải trang bằng cách đánh dấu ẩn đầu tiên và cài đặt hiển thị trong javascript
  • Xử lý thay đổi kích thước trình duyệt một cách duyên dáng
  • Ngoài ra, cài đặt chân trang sao lưu trang nếu trình duyệt nhỏ hơn và chân trang trở nên lớn hơn trang
  • Điều chỉnh chức năng chiều cao

Đây là những gì làm việc cho tôi với những điều chỉnh:

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;
});
— Cory
nguồn
11

Điều này làm việc cho tôi hoàn hảo.

Thêm lớp điều hướng dưới cùng cố định vào chân trang của bạn.

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

Tôi đã sử dụng nó như thế này:

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

Và nó đặt xuống dưới cùng trên toàn bộ chiều rộng.

Chỉnh sửa: Điều này sẽ đặt chân trang luôn luôn hiển thị, đó là điều bạn cần xem xét.

— sp_ome
nguồn
10

Bạn cần phải bọc .container-fluiddiv của bạn để chân trang dính của bạn hoạt động, bạn cũng đang thiếu một số thuộc tính trên .wrapperlớp. Thử cái này:

Xóa thẻ padding-top:70pxkhỏi bodythẻ của bạn và đưa nó vào .container-fluidthay vào đó, như vậy:

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

Chúng tôi phải làm điều này bởi vì đẩy bodyxuống để phù hợp với thanh điều hướng cuối cùng đẩy chân trang ra xa hơn một chút (xa hơn 70px) qua chế độ xem để chúng tôi có được một thanh cuộn. Chúng tôi nhận được kết quả tốt hơn đẩy .container-fluiddiv thay thế.

Tiếp theo, chúng ta phải loại bỏ .wrapperlớp bên ngoài .container-fluiddiv của bạn và bọc #maindiv của bạn với nó, như vậy:

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

.wrapperChân trang của bạn tất nhiên phải nằm ngoài div vì vậy hãy xóa nó khỏi div .wrapper và đặt nó bên ngoài, như vậy:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Sau khi hoàn thành, hãy đẩy chân trang của bạn đến gần .wrapperlớp của bạn bằng cách sử dụng lề âm, như vậy:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

Và điều đó sẽ hoạt động, mặc dù có lẽ bạn sẽ phải sửa đổi một vài thứ khác để làm cho nó hoạt động khi màn hình được thay đổi kích thước, như đặt lại chiều cao trên .wrapperlớp, như vậy:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}
— Andres Ilich
nguồn
9

Đây là cách đúng đắn để làm điều đó với Twitter Bootstrap và lớp đáy cố định điều hướng mới: (bạn không biết tôi đã mất bao lâu để tìm kiếm cái này)

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>
— Régis B.
nguồn
9

Sử dụng các tiện ích flex được tích hợp trong Bootstrap 4! Đây là những gì tôi nghĩ ra khi sử dụng hầu hết các tiện ích 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 để làm cho div chính một container flex
  • .flex-column trên div chính để sắp xếp các mục flex của bạn trong một cột
  • min-height: 100vh đến div chính, với thuộc tính style hoặc trong CSS của bạn, để điền vào khung nhìn theo chiều dọc
  • .flex-grow-1 trên vùng chứa, phần tử để có vùng chứa nội dung chính chiếm toàn bộ không gian còn lại trong chiều cao khung nhìn.
— EGhost57
nguồn
Thay vì min-height: 100vhcác min-vh-100lớp từ Bootstrap có thể được sử dụng.
— ikonuk
Giải pháp này hoạt động rất tốt, bao gồm đề xuất min-vh-100 từ @ikonuk
— TGR
4

Sử dụng thành phần thanh điều hướng và thêm lớp .navbar-fixed-bottom:

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

thêm cơ thể 

  { padding-bottom: 70px; }
— Quản trị tập tin3
nguồn
3

để xử lý các bố cục ràng buộc chiều rộng, hãy sử dụng các cách sau để bạn không bị các góc tròn và do đó thanh điều hướng của bạn sẽ được tuôn ra hai bên của ứng dụng

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

sau đó bạn có thể sử dụng css để ghi đè các lớp bootstrap để điều chỉnh chiều cao, phông chữ và màu sắc

    .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
nguồn
3

Bạn có thể sử dụng jQuery để xử lý việc này:

$(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();
    });
});
— Đức Châu
nguồn
2

Người duy nhất làm việc cho tôi!:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
— Ricardo
nguồn
2

Kỹ thuật đơn giản nhất có lẽ là sử dụng Bootstrap navbar-static-bottomkết hợp với thiết lập div container chính với height: 100vh( phần trăm cổng xem CSS3 mới ). Điều này sẽ tuôn ra chân trang xuống phía dưới.

<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>
— Pan Wangperawong
nguồn
2

Đã thử nghiệm với 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šan Maďar
nguồn
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;
}

Chiều cao chân phù hợp với kích thước của vết lõm dưới cùng của phần tử bọc.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
— Shar Xếp512
nguồn
1

Đây là một giải pháp cho phiên bản Bootstrap mới nhất (4.3 tại thời điểm viết) bằng 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;
}

Và một ví dụ về codepen: https://codepen.io/tillytoby/pen/QPdomR

— Tom T
nguồn
1

Theo ví dụ Bootstrap 4.3 , trong trường hợp bạn mất đi sự tỉnh táo như tôi đã làm, đây là cách nó thực sự hoạt động:

  • Tất cả cha mẹ của div footer cần phải có height: 100%( h-100lớp)
  • Phụ huynh trực tiếp của chân trang cần phải có display: flex( d-flexlớp)
  • Chân trang cần phải có margin-top: auto( mt-autolớp)

Vấn đề là trong các khung công tác mặt trước hiện đại, chúng ta thường có các hàm bao bổ sung xung quanh các phần tử này.

Ví dụ, trong trường hợp của tôi, với Angular, tôi đã tạo chế độ xem từ một gốc ứng dụng riêng, thành phần ứng dụng chính và thành phần chân trang - tất cả đều thêm phần tử tùy chỉnh của chúng vào DOM.

Vì vậy, để làm cho nó hoạt động, tôi đã phải thêm các lớp vào các phần tử trình bao bọc này: bổ sung h-100, di chuyển d-flexmột cấp xuống và di chuyển mt-automột cấp lên từ chân trang (thực ra nó không còn trên lớp chân trang nữa, mà là <app-footer>tùy chỉnh của tôi thành phần).

— MrValueType
nguồn
Tôi đã phải đặt class="h-100"vào <html>thẻ quá.
— Kel Solaar
1

Sử dụng đoạn mã này trong bootstrap, nó hoạt động

<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
nguồn
1

Giải pháp Bootstrap v4 +

Đây là một giải pháp không yêu cầu xem xét lại cấu trúc HTML hoặc bất kỳ thủ thuật CSS bổ sung nào liên quan đến phần đệm:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Lưu ý rằng giải pháp này cho phép các chân trang có độ cao linh hoạt, đặc biệt hữu ích khi thiết kế các trang cho nhiều kích thước màn hình với gói nội dung khi thu nhỏ.

Tại sao điều này hoạt động

  • style="height:100%;"làm cho <html>thẻ chiếm toàn bộ không gian của tài liệu.
  • lớp d-flexđặt display:flexvào <body>thẻ của chúng tôi .
  • lớp flex-columnđặt flex-direction:columnvào <body>thẻ của chúng tôi . Con của nó ( <header>, <main>, <footer>và bất kỳ con trực tiếp khác) hiện đang liên kết theo chiều dọc.
  • lớp h-100đặt height:100%vào <body>thẻ của chúng tôi , có nghĩa là nó sẽ bao phủ toàn bộ màn hình theo chiều dọc.
  • lớp flex-grow-1đặt flex-grow:1thành của chúng tôi <main>, hướng dẫn nó một cách hiệu quả để lấp đầy bất kỳ không gian dọc nào còn lại, do đó lên tới chiều cao 100% theo chiều dọc mà chúng tôi đã đặt trước trên <body>thẻ của chúng tôi .

Bản demo hoạt động tại đây: https://codepen.io/maxencemaire/pen/VwvyRQB

Xem https://css-tricks.com/snippets/css/a-guide-to-flexbox/ để biết thêm thông tin về flexbox.

— Kathandra
nguồn
h-100Lớp không hoạt động đúng, tốt hơn là sử dụng min-vh-100.
— ikonuk
@ikonuk Chính xác ý bạn là gì khi "không hoạt động đúng"? Xin hãy giải thích.
— Kathandrax
Bởi vì h-100lớp luôn phụ thuộc vào chiều cao của phần tử cha và có thể không hoạt động đúng trong một số trường hợp. Vì chúng tôi muốn chân trang ở dưới cùng của khung nhìn, nên sử dụng chiều cao của khung nhìn là một cách tốt.
— ikonuk
Một lần nữa, xác định 'một số trường hợp'. Lập luận của bạn về sự phụ thuộc cha mẹ chỉ áp dụng tương tự với min-width. Đó là lý do tại sao HTMLthẻ có height100% trong mã. Ví dụ làm việc và tôi không hiểu tại sao nó sẽ không được đưa ra những hỗ trợ qua trình duyệt cho CSS heightbất động sản , đó là cuối cùng những gì Bootstrap đoạn chuyển thành.
— Kathandrax
Tôi không nói ví dụ của bạn không hoạt động. Không phải ai cũng sử dụng phong cách trong HTMLthẻ. Trong trường hợp của tôi, giải pháp của bạn không hoạt động vì tôi không thích sử dụng kiểu trong HTMLthẻ. Và tôi không muốn bodythẻ phụ thuộc vào phụ huynh khác ngoài chế độ xem. Bạn không cần phải đặt style="height:100%;"và h-100đồng thời. Đưa min-vh-100vào cơ thể chỉ đơn giản là làm công việc và ít mã.
— ikonuk
0

Có vẻ như height:100%'chuỗi' đang bị phá vỡ tại div#main. Hãy thử thêm height:100%vào nó và điều đó có thể giúp bạn tiến gần hơn đến mục tiêu của mình.

— bộ não911
nguồn
0

Tại đây, bạn sẽ tìm thấy cách tiếp cận trong HAML ( http://haml.info ) với thanh điều hướng ở trên cùng và chân trang ở cuối trang:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
— Hannes
nguồn
Bạn có thể giải thích một chút về câu trả lời của bạn không? Các câu trả lời chỉ có mã thường không được khuyến khích.
— Qix - MONICA ĐƯỢC PHÂN PHỐI
1
Được rồi, bạn muốn biết gì?
— Hannes
Tôi không cần biết điều đó, nhưng ai đó đến trang web này sau đó có thể không biết chính xác lý do tại sao mã câu trả lời của bạn làm những gì nó làm.
— Qix - MONICA ĐƯỢC PHÂN BIỆT
Có lẽ tôi nên xóa nó. Tôi đã viết một đoạn giới thiệu mới. :)
— Hannes
0

Giữ cho nó đơn giản.

footer {
  bottom: 0;
  position: absolute;
}

Bạn cũng có thể cần phải bù chiều cao của chân trang bằng cách thêm một margin-bottomchiều cao tương đương với chiều cao chân trang vào body.

— obfk
nguồn
0

Đây là một ví dụ sử dụng 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>

vĩ cầm

— Victor
nguồn
0

một giải pháp khả thi khác, chỉ cần sử dụng truy vấn phương tiện

@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
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.