CSS: cố định xuống dưới cùng và căn giữa

Tôi cần cố định chân trang ở cuối trang và căn giữa trang. Nội dung của footer có thể thay đổi bất cứ lúc nào nên tôi không thể căn giữa nó qua margin-left: xxpx; margin-right: xxpx;

Vấn đề là vì một số lý do mà điều này không hoạt động:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

Tôi thu thập thông tin trên web và không tìm thấy gì. Tôi đã thử tạo một div container và nada. Tôi đã thử các kết hợp khác và gurnisht. Làm thế nào tôi có thể làm cho điều này xảy ra?

Cảm ơn

Bạn nên sử dụng giải pháp dính chân trang như sau:

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

Có những người khác như thế này;

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

với html:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

mã sửa đổi bởi Daniel Kanis :

chỉ cần thay đổi các dòng sau trong CSS

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

và trong html:

<p class="enclose problem">
Your footer text here.
</p>

Một giải pháp jQuery

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

Đôi khi, việc triển khai JS dễ dàng hơn là hack CSS cũ.

http://jsfiddle.net/gLhEZ/

Vấn đề nằm ở chỗ position: static. Tĩnh có nghĩa là không làm gì cả với vị trí. position: absolutelà những gì bạn muốn. Căn giữa phần tử vẫn còn phức tạp. Những điều sau đây sẽ hoạt động:

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

hoặc là

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

Nhưng tôi đề nghị phương pháp đầu tiên. Tôi đã sử dụng kỹ thuật căn giữa từ câu trả lời này: Làm thế nào để căn giữa phần tử được định vị tuyệt đối trong div?

Có 2 vấn đề tiềm ẩn mà tôi thấy:

1 - IE đã gặp sự cố với vị trí: đã sửa trong quá khứ. Nếu bạn đang sử dụng IE7 + với loại tài liệu hợp lệ hoặc trình duyệt không phải IE thì đây không phải là một phần của sự cố

2 - Bạn cần chỉ định chiều rộng cho chân trang nếu bạn muốn đối tượng chân trang được căn giữa. Nếu không, nó mặc định cho toàn bộ chiều rộng của trang và lề tự động cho bên trái và bên phải được đặt thành 0. Nếu bạn muốn thanh chân trang chiếm chiều rộng (như thanh thông báo StackOverflow) và căn giữa văn bản, thì bạn cần để thêm "text-align: center" vào định nghĩa của bạn.

Tôi đã bao gồm 'sự cố div trong một div khác', hãy gọi div này là div kèm theo ... làm cho div bao quanh trong css có chiều rộng là 100% và vị trí được cố định với đáy là 0 ... sau đó chèn div vấn đề vào div kèm theo đây là nó sẽ trông như thế nào

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

thì trong html ...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

Được rồi!
- Hypertextie

Dựa trên nhận xét từ @Michael:

Có một cách tốt hơn để làm điều này. Đơn giản chỉ cần tạo phần nội dung với vị trí: tương đối và một phần đệm bằng kích thước của chân trang + khoảng cách giữa nội dung và chân trang mà bạn muốn. Sau đó, chỉ cần tạo một div chân trang với tuyệt đối và dưới cùng: 0.

Tôi đã đi tìm lời giải thích và nó tóm gọn lại điều này:

• Theo mặc định, vị trí tuyệt đối của bottom: 0px đặt nó ở cuối cửa sổ ... chứ không phải cuối trang.
• Định vị tương đối một phần tử đặt lại phạm vi vị trí tuyệt đối của phần tử của nó ... vì vậy bằng cách đặt phần thân thành vị trí tương đối, vị trí tuyệt đối của bottom: 0px giờ đây thực sự phản ánh phần cuối của trang.

Thông tin chi tiết tại http://css-tricks.com/absolute-positioning-inside-relative-positioning/

đây là một ví dụ sử dụng lưới css.

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>

bạn có thể sử dụng lưới css: một ví dụ cụ thể

Tôi gặp phải sự cố trong đó điển hình position: fixedvà bottom: 0không hoạt động. Đã khám phá ra một chức năng gọn gàng với position: sticky. Lưu ý rằng nó "tương đối" mới nên sẽ không có trên IE / Edge 15 trở về trước.

Đây là một ví dụ cho w3schools.

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 30px;
  font-size: 20px;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

</body>
</html>