Làm cho chân trang dính vào cuối trang bằng Twitter Bootstrap

75

Tôi có một số trang web không có nhiều nội dung và chân trang nằm ở giữa trang, nhưng tôi muốn nó ở dưới cùng.

Tôi đã đặt tất cả các trang của mình trong một "người giữ"

#holder {
  min-height: 100%;
  position:relative;
}

Và sau đó sử dụng CSS sau cho chân trang của tôi

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

Html cho footer của tôi

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Tôi muốn giữ cho phần chân trang trôi chảy.

css twitter-bootstrap

— Richlewis
nguồn

1

vị trí tuyệt đối của footer của bạn hoàn toàn phụ thuộc vào kích thước container-divs. Vì vậy, nếu không có bất kỳ nội dung nào trong vùng chứa, nó có thể kết thúc ở đâu đó ở khoảng giữa trang và bạn đặt chân trang 50px dưới đó.

— jakee 19/07/12

cảm ơn cho câu trả lời, những gì sẽ là một giải pháp để vượt qua điều này?

— Richlewis

Định vị chân trang của bạn bên ngoài div vùng chứa hoặc buộc vùng chứa có chiều cao đầy đủ

— jakee

Đây có thể là những gì bạn đang tìm kiếm stackoverflow.com/q/8824831/681807

— My Head Hurts

@MyHeadHurts, nó là giải pháp của bạn mà tôi đang sử dụng, chút nghĩ rằng tôi có thể gặp phải những vấn đề hiện nay như tôi đã đặt chân trong một container, hàng và khoảng 12

— Richlewis

44

Như đã thảo luận trong phần nhận xét, bạn đã dựa trên mã của mình trên giải pháp này: https://stackoverflow.com/a/8825714/681807

Một trong những phần quan trọng của giải pháp này là thêm height: 100%vào html, bodyđể #footerphần tử có chiều cao cơ sở để làm việc - mã này bị thiếu trong mã của bạn:

html,body{
    height: 100%
}

Bạn cũng sẽ thấy rằng bạn sẽ gặp vấn đề với việc sử dụng bottom: -50pxvì điều này sẽ đẩy nội dung của bạn xuống màn hình đầu tiên khi không có nhiều nội dung. Bạn sẽ phải thêm margin-bottom: 50pxvào phần tử cuối cùng trước #footer.

— Đau đầu của tôi
nguồn

Cảm ơn rất nhiều, tôi nghĩ rằng html, chiều cao cơ thể đã được đặt, có vẻ như nó chưa được, cũng thay đổi dưới cùng và thì đấy. Cảm ơn một lần nữa

— Richlewis

xin lỗi để hỏi lại nhưng bây giờ tôi đã nhận thấy khi chế độ xem được giảm xuống để nói kích thước của một chiếc iPhone, văn bản chân trang bị chồng lên bởi nội dung? bất kỳ ý tưởng?

— Richlewis

Không vấn đề gì. Bạn có đang áp dụng margin-bottom: 50pxcho phần nội dung cuối cùng trước chân trang không? Nếu bạn đang sử dụng và nó không hoạt động thì bạn có thể phải tăng điều này cho iPhone (không chắc tại sao bạn lại làm như vậy, nhưng có thể là như vậy). Bạn có thể làm điều này bằng các truy vấn phương tiện truyền thông CSS

— My Head Hurts

1

Tôi thấy sai lầm của mình, tôi đã không áp dụng margin-bottom: 50px cho nội dung trước footer như bạn đã nói, đặt dưới cùng thành 0 và bây giờ tốt, không cần truy vấn phương tiện truyền thông ... PHEW !!!

— Richlewis

Đó là một trong những sửa chữa tuyệt vời;

— Ryu_hayabusa 27/12/13

94

chỉ cần thêm lớp navbar-fixed-bottom vào footer của bạn.

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

Cập nhật cho Bootstrap 4 -

như đã đề cập bởi Sara Tibbetts - lớp là cố định dưới cùng

<div class="footer fixed-bottom">

— Jon
nguồn

12

Điều này đã tạo ra một chân trang cố định, với nội dung cuộn lên bên dưới nó. Tui bỏ lỡ điều gì vậy? Cám ơn.

— scharfmn

Nó làm cho chân trang dính vào cuối màn hình, nếu đó là ý của bạn khi bị đóng băng. Trên màn hình nhỏ, nó sẽ hiển thị chân trang ngay cả khi có nội dung chồng chéo. Phụ thuộc nếu bạn muốn luôn hiển thị chân trang

— Jon

Cũng cần lưu ý rằng nếu bạn có JS tạo dom ng-repeatở dạng góc ... bạn sẽ cần đặt margin-bottomtrên trình bao bọc cho các phần tử được tạo bằng chiều cao của chân trang dính ... bootstrap đặt lề trên cùng trên chân trang nhưng lề -top sẽ không áp dụng cho dom đã tạo và bạn sẽ kết thúc với phần dưới cùng của dom sẽ do bạn tạo dưới chân trang.

— Benjamin Conant vào

Cảm ơn! Đã làm cho tôi!

— FlokiTheFisherman

4

Tính đến Bootstrap 4, thay vì navbar-fixed-bottomnó chỉ làfixed-bottom

— Sara Tibbetts

12

Hầu hết các giải pháp được đề cập ở trên không hiệu quả với tôi. Tuy nhiên, giải pháp đưa ra dưới đây hoạt động tốt:

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

Nguồn

— Da đen
nguồn

3

Hoạt động nhưng ghi đè nội dung

— Rami Alloush 15/02/19

Làm việc tốt cho tôi

— Ozan Yasin Dogan

8

http://bootstrapfooter.codeplex.com/

Điều này sẽ giải quyết vấn đề của bạn.

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</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;
color:#fff;
}

— lễ phục sinh
nguồn

cảm ơn, @renderbody () đang làm gì, tôi đã thử giải pháp này trước đây và tôi thực sự nhận được @renderbody () xuất ra dưới dạng html?

— Richlewis

Bỏ qua phần đó - nó chỉ là một hàm gọi nội dung phần thân từ các điều khiển khác.

— 2012

6

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

Sử dụng calc tuyệt vời. Đáng buồn thay, vẫn là một vấn đề trong năm 2017 với các trang web tùy chỉnh sử dụng một số chức năng bootstrap

— soulhined 23/09/17

6

Sử dụng các lớp bootstrap để làm lợi thế của bạn. navbar-static-bottomđể nó ở dưới cùng.

<div class="navbar-static-bottom" id="footer"></div>

— Người say mê mã hóa
nguồn

1

Nó có thể dễ dàng đạt được với CSS flex. Có đánh dấu HTML như sau:

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

CSS sau nên được sử dụng:

html {
    height: 100%;
}
body {
    min-height: 100%;
   display: flex;
   flex-direction: column;
}
body > .container {
    flex-grow: 1;
}

Đây là CodePen để chơi với: https://codepen.io/webdevchars/pen/GPBqWZ

— Damian Czapiewski
nguồn