Cách tạo một footer hoạt động tốt với Bootstrap 3

Question 1

Có hoặc không có điều hướng trên cùng, rất phổ biến các trang web có chân trang dính. Bootstrap có một cơ sở để dễ dàng tạo chân trang cố định , nhưng không có cơ sở nào như vậy để tạo chân trang dính - có một sự khác biệt lớn.

Googling câu hỏi này sẽ tiết lộ rằng hàng trăm, nếu không muốn nói là hàng nghìn nhà phát triển có cùng một câu hỏi nhưng không có câu trả lời tốt.

Trớ trêu thay, trang tài liệu Bootstrap có một footer dính cùng với kiểu bootstrap và một thanh điều hướng trên cùng cố định. Đó là tất cả css tùy chỉnh, và không phải là một phần của khuôn khổ. Vì vậy, một lộ trình rõ ràng là lấy và cấu trúc lại kiểu dáng tùy chỉnh của chúng, vì nó rõ ràng là hoạt động tốt trong khuôn khổ Bootstrap, nhưng điều đó có vẻ khó khăn hơn nó phải làm.

Xem plunkr này để biết trang ví dụ với thanh điều hướng trên cùng Bootstrap và chân trang không dính, không mong muốn.

Vấn đề:

(Cảm ơn Softlayer - về đồ họa )

Chân trang không dính khá xấu

Giải pháp mong muốn:

Chân trang dính luôn ở dưới cùng

Tất nhiên chân trang cũng phải đáp ứng và thân thiện với nhiều trình duyệt ...

Question 2

Câu trả lời, như Schmalzy chỉ ra, có thể tìm thấy ở đây trong phần ví dụ của trang getbootstrap.

Nhưng ví dụ đó không bao gồm điều hướng hàng đầu. Đối với nav đầu cố định với chân dính, xem này plnkr, hoặc mã dưới đây.

Kiểu CSS:

/* Styles go here */

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


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .credit {
  margin: 20px 0;
}

Index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Sticky Footer Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">

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

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Wrap all page content here -->
    <div id="wrap">

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <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="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</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><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</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><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

      <!-- 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>
        <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
      </div>
    </div><!-- Wrap Div end -->

    <div id="footer">
      <div class="container">
        <p class="text-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>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>

Question 3

Các giải pháp chân trang cố định dựa trên chân trang có chiều cao cố định đang không được ưa chuộng với các phương pháp tiếp cận đáp ứng (trong đó chiều cao của chân trang thường thay đổi tại các điểm ngắt khác nhau). Giải pháp chân trang dính đáp ứng đơn giản nhất mà tôi đã thấy liên quan đến việc sử dụng display: tabletrên vùng chứa cấp cao nhất, ví dụ:

http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

http://timothy-long.com/responsive-sticky-footer/

http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/

Question 4

Cách tốt nhất là làm như sau:
HTML: Sticky Footer
CSS: CSS cho Sticky Footer
HTML Mẫu mã:

<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>
  <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>

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

Mẫu mã 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;
}

Một chỉnh sửa nhỏ khác có thể làm cho nó hoàn hảo hơn (tùy thuộc vào dự án của bạn), vì vậy nó sẽ không ảnh hưởng đến footer trên các chế độ xem trên thiết bị di động.

@media (max-width:768px){ .footer{position:absolute;width:100%;} }
@media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}

Question 5

Tôi đã tìm kiếm một cách đơn giản để làm cho chân trang dính hoạt động. Tôi vừa áp dụng class="navbar-fixed-bottom"và nó hoạt động ngay lập tức. Chỉ một điều cần lưu ý là điều chỉnh cài đặt của footer cho thiết bị di động. Chúc mừng!

Question 6

Đối với những người đang tìm kiếm câu trả lời đơn giản, bạn có thể lấy một ví dụ làm việc đơn giản từ đây :

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 60px /* Height of the footer */
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px /* Example value */
}

Chỉ cần chơi với body's margin-bottomđể thêm không gian giữa nội dung và chân trang.

Question 7

Tôi sẽ giải thích kỹ hơn về những gì robodo đã nói trong một trong các nhận xét ở trên, một cách thực sự nhanh chóng và đẹp mắt và điều quan trọng hơn, cách tiếp cận nhanh nhạy (không cố định chiều cao) mà không liên quan đến bất kỳ vụ hack nào là sử dụng flexbox. Nếu bạn không bị giới hạn bởi trình duyệt hỗ trợ thì đó là một giải pháp tuyệt vời.

HTML

<body>
  <div class="site-content">
    Site content
  </div>
  <footer class="footer">
    Footer content
  </footer>
</body>

CSS

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

Hỗ trợ trình duyệt có thể được kiểm tra tại đây: http://caniuse.com/#feat=flexbox

Các giải pháp sự cố phổ biến hơn bằng cách sử dụng flexbox: https://github.com/philipwalton/solved-by-flexbox

Question 8

Không chắc bạn đã thử những gì cho đến nay, nhưng nó khá đơn giản. Chỉ cần làm điều này: http://plnkr.co/edit/kmEWh7?p=preview

html, body {
  height: 100%;
}

footer {
  position: absolute;
  bottom: 0;
}

Question 9

Vì nó nằm trong bootstrap 3 nên trang web sẽ sử dụng jQuery. Vì vậy, giải pháp cũng có thể là như sau, thay vì cố gắng chơi với CSS phức tạp:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .my-footer {
            border-radius : 0px;
            margin : 0px; /* pesky margin below .navbar */
            position : absolute;
            width : 100%;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Content of any length -->
            asdfasdfasdfasdfs <br />
            asdfasdfasdfasdfs <br />
            asdfasdfasdfasdfs <br />
        </div>
    </div>

    <div class="navbar navbar-inverse my-footer">
        <div class="container-fluid">
            <div class="row">
                <p class="navbar-text">My footer content goes here...</p>
            </div>
        </div>
    </div>

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var $docH = $(document).height();
            // The document height will grow as the content on the page grows.
            $('.my-footer').css({
                /*
                The default height of .navbar is 50px with a 1px border,
                change this 52 if you change the height of your footer.
                */
                top: ($docH - 52) + 'px'
            });
        });
    </script>
</body>
</html>

Một cách khác về nó, hy vọng nó sẽ giúp.

Trân trọng.

Question 10

dễ dàng thiết lập

position:absolute;
bottom:0;
width:100%;

tới .footer của bạn

cứ làm đi

Question 11

Trong trường hợp html của bạn có cấu trúc (thô):

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

thì css đơn giản nhất để sửa chân trang ở cuối màn hình của bạn là

html, body {
    height: 100%;
}
.wrapper {
  min-height: calc(100vh - 80px);
}
.footer {
   height: 80px;
}

... trong đó chiều cao của chân trang là 80px. calctính toán chiều cao của trình bao bọc bằng chiều cao của cửa sổ trừ đi chiều cao của chân trang (80px) nằm ngoài.wrapper

Question 12

Điều hiệu quả đối với tôi là thêm vị trí liên quan đến thẻ html.

html {
  min-height:100%;
  position:relative;
}
body {
  margin-bottom:60px;
}
footer {
  position:absolute;
  bottom:0;
  height:60px;
}

Question 13

   <style type="text/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 -60px;
     }

     /* Set the fixed height of the footer here */
     #push,
     #footer {
       height: 60px;
     }
     #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;
       }
     }



     /* Custom page CSS
     -------------------------------------------------- */
     /* Not required for template or sticky footer method. */

     .container {
       width: auto;
       max-width: 680px;
     }
     .container .credit {
       margin: 20px 0;
     }

   </style>


<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>
    <p>Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</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>