Làm cho div luôn ở cuối nội dung của trang ngay cả khi có thanh cuộn

261

CSS Đẩy Div xuống cuối trang

Vui lòng nhìn vào liên kết đó, tôi muốn ngược lại: Khi nội dung tràn vào thanh cuộn, tôi muốn chân trang của tôi luôn ở cuối trang hoàn chỉnh , như Stack Overflow.

Tôi có một div với id="footer"và CSS này:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

Nhưng tất cả những gì nó làm là đi đến cuối khung nhìn và ở đó ngay cả khi bạn cuộn xuống, vì vậy nó không còn ở phía dưới nữa.

Hình: Đề thi

Xin lỗi nếu không được làm rõ, tôi không muốn nó được sửa chữa, chỉ để nó ở dưới cùng thực sự của tất cả nội dung.

css  positioning  css-position  footer 
— H Bellamy
nguồn
1
cố gắng position:fixed, mặc dù đó sẽ không phải là cách tốt nhất để làm điều đó
— redDevil
Thử vị trí: tương đối trên cơ thể.
1
bạn đã không đóng của bạn; sau vị trí: tuyệt đối. nó sẽ làm việc hoàn hảo khác!
— AlexHighHigh

Câu trả lời:

545

Đây chính xác là những gì position: fixedđược thiết kế cho:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Đây là câu đố: http://jsfiddle.net/uw8f9/

— Joseph Silber
nguồn
65
Giải pháp đó không tốt cho 90% trường hợp. nếu bạn thay đổi kích thước cửa sổ của mình, chân trang của bạn sẽ phủ lên nội dung khác và sẽ không dừng lại ở cuối nội dung của bạn
— vsync
10
@aroth đó là vì chúng là hai giải pháp hoàn toàn khác nhau. Giải pháp này sẽ giữ chân trang ở dưới cùng của khu vực hình ảnh của màn hình mọi lúc. Giải pháp thay thế giữ chân trang ở dưới cùng của màn hình hoặc dưới cùng của trang, tùy thuộc vào cái nào lớn hơn - đó là những gì người hỏi yêu cầu.
— Đầu tôi đau
6
@MyHeadHurts - Bạn hoàn toàn đúng. Sau khi trả lời, tôi nhận ra rằng đây không phải là điều OP muốn, nhưng tôi đã để nó ở đây cho những người tìm kiếm một chân trang cố định đơn giản. Từ các bình luận (và bình chọn), có vẻ như nhiều người đang vật lộn với tính năng CSS cơ bản này.
— Joseph Silber
1
@MyHeadHurts - Đủ công bằng, mặc dù đối với tiền của tôi, cả hai về cơ bản vẫn giống nhau. Nội dung cuộn bên dưới fixedchân trang, khi có đủ nội dung để làm như vậy. Nó đủ tốt cho tôi. Tất nhiên, tôi có thể thấy các footer rất lớn như những gì họ có trên stackoverflow sẽ không hoạt động tốt với fixedcách tiếp cận, nhưng đối với một footer một dòng cơ bản thì cách tiếp cận này hoạt động tốt theo quan điểm của tôi.
— aroth
@aroth Tôi đồng ý, đây là một giải pháp tốt và tất cả phụ thuộc vào những gì bạn muốn. Tôi chỉ chỉ ra lý do tại sao một giải pháp phức tạp hơn giải pháp kia -> họ không làm điều tương tự.
— Đầu tôi đau
187

Thật không may, bạn không thể làm điều này với việc thêm một chút HTML và có một phần CSS dựa vào một phần khác.

HTML

Trước tiên, bạn cần phải bọc của bạn header, footervà #bodythành một #holderdiv:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

Sau đó, đặt height: 100%thành htmlvà body(cơ thể thực tế, không phải #bodydiv của bạn ) để đảm bảo bạn có thể đặt chiều cao tối thiểu dưới dạng phần trăm trên các phần tử con.

Bây giờ được đặt min-height: 100%trên #holderdiv để nó lấp đầy nội dung của màn hình và sử dụng position: absoluteđể ngồi chân trang ở dưới cùng của #holderdiv.

Thật không may, bạn phải áp dụng padding-bottomcho #bodydiv có cùng chiều cao footerđể đảm bảo rằng footernó không nằm trên bất kỳ nội dung nào:

html,body{
    height: 100%
}

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

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

Ví dụ làm việc, thân ngắn: http://jsfiddle.net/ELUGc/

Ví dụ làm việc, thân dài: http://jsfiddle.net/ELUGc/1/

— Đầu tôi đau
nguồn
tôi không thể hiểu tại sao chiều rộng: 100%; là bắt buộc
— Somnath Kharat
4
@sTACKoVERFLOW - Nếu bạn không chỉ định một width hoặc cả hai left và rightsau đó các giá trị được đặt thành autovà phần tử sẽ bao bọc để phù hợp với nội dung của nó. Chỉ định width: 100% hoặc left: 0 và right:0đảm bảo rằng phần tử được định vị tuyệt đối sẽ lấy toàn bộ chiều rộng của phần tử chứa
— Đầu tôi đau vào
Tôi đã tìm kiếm hành vi tương tự, nhưng trong trường hợp của tôi, div #body được thả nổi, bằng cách nói "float: left". Ví dụ cơ thể ngắn hoạt động, nhưng ví dụ cơ thể dài thì không. Mọi đề xuất làm thế nào tôi có thể có được hành vi mong muốn bằng cách sử dụng float trên div #body.
— Jatin
@Ian nói, trong một câu trả lời vì anh ta không có đủ đại diện để bình luận: Nếu bạn gặp vấn đề trong asp.net với câu trả lời từ 'My Head Hurts' - bạn cần thêm 'height: 100%' vào chính đã tạo thẻ FORM cũng như các thẻ HTML và BODY để làm việc này.
— msouth
Nếu bạn đang cố gắng để điều này hoạt động bên trong div chứ không phải bên trong toàn bộ cơ thể, hãy đảm bảo bạn chỉ định height=100%trên tất cả các thành phần có chứa của mình, bao gồm <form>các thành phần.
— Ben Caine
13

Chỉ cần làm việc cho một giải pháp khác như ví dụ trên có lỗi (lỗi ở đâu đó) cho tôi. Sự thay đổi từ câu trả lời được chọn.

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

cho bố cục html

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

Chà, cách này không hỗ trợ trình duyệt cũ, tuy nhiên trình duyệt cũ có thể cuộn xuống 30px để xem chân trang có thể chấp nhận được

— Vô danh
nguồn
5

Tôi nhận ra rằng nó không sử dụng điều này để 'trả lời các câu trả lời khác' nhưng thật không may, tôi không có đủ đại diện để thêm nhận xét vào câu trả lời thích hợp (!) Nhưng ...

Nếu bạn gặp vấn đề trong asp.net với câu trả lời từ 'My Head Hurts' - bạn cần thêm 'height: 100%' vào thẻ FORM được tạo chính cũng như các thẻ HTML và BODY để điều này hoạt động.

— Ian
nguồn
4

Bạn đã không đóng của bạn; sau vị trí: tuyệt đối. Nếu không, mã trên của bạn sẽ làm việc hoàn hảo!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}
— AlexHigh
nguồn
3

Tôi sẽ bình luận nếu tôi có thể, nhưng tôi chưa có quyền, vì vậy tôi sẽ đăng một gợi ý dưới dạng câu trả lời, cho hành vi không mong muốn trên một số thiết bị Android:

Vị trí: Đã sửa chỉ hoạt động trong Android 2.1 đến 2.3 bằng cách sử dụng thẻ meta sau: 

<meta name="viewport" content="width=device-width, user-scalable=no">.

xem http://caniuse.com/#search=poseition

— Tarciso Junior
nguồn
2

Đây là một giải pháp trực quan bằng cách sử dụng lệnh viewport chỉ đặt chiều cao tối thiểu thành chiều cao khung nhìn trừ đi chiều cao chân trang.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
— Obromios
nguồn
1

Tôi đã giải quyết vấn đề tương tự bằng cách đặt tất cả nội dung chính của mình trong thẻ div phụ (id = "bên ngoài"). Sau đó, tôi đã di chuyển thẻ div với id = "footer" bên ngoài thẻ div "bên ngoài" cuối cùng này. Tôi đã sử dụng CSS để chỉ định chiều cao của "bên ngoài" và chỉ định chiều rộng và chiều cao của "chân trang". Tôi cũng đã sử dụng CSS để chỉ định lề trái và lề phải của "chân trang" là tự động. Kết quả là phần chân trang nằm chắc chắn ở cuối trang của tôi và cũng cuộn với trang đó (mặc dù, nó vẫn xuất hiện bên trong div "bên ngoài", nhưng vui vẻ bên ngoài div "nội dung" chính có vẻ lạ, nhưng nó nơi tôi muốn nó).

— David B
nguồn
1

Tôi chỉ muốn thêm - hầu hết các câu trả lời khác đều hoạt động tốt với tôi; tuy nhiên, phải mất một thời gian dài để chúng hoạt động!

Điều này là do cài đặt height: 100%chỉ lấy chiều cao của cha mẹ!

Vì vậy, nếu toàn bộ html của bạn (bên trong cơ thể) trông như sau:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

Sau đó sẽ ổn thôi:

html,body{
    height: 100%
}

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

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

... vì "người giữ" sẽ lấy chiều cao của nó trực tiếp từ "cơ thể".

Kudos to My Head Hurts, người có câu trả lời là người cuối cùng tôi đi làm!

Tuy nhiên. Nếu html của bạn được lồng nhiều hơn (vì nó chỉ là một thành phần của trang đầy đủ hoặc trong một cột nhất định, v.v.) thì bạn cần đảm bảo rằng mọi thành phần có chứa cũng đã height: 100%được đặt trên div. Nếu không, thông tin về chiều cao sẽ bị mất giữa "cơ thể" và "người giữ".

Ví dụ như sau, trong đó tôi đã thêm lớp "chiều cao đầy đủ" cho mỗi div để đảm bảo chiều cao giảm xuống các yếu tố tiêu đề / cơ thể / chân trang của chúng tôi:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

Và nhớ đặt chiều cao cho lớp toàn chiều cao trong css:

#full-height{
    height: 100%;
}

Điều đó đã khắc phục vấn đề của tôi!

— Tim L
nguồn
0

nếu bạn có chân trang có chiều cao cố định (ví dụ 712px), bạn có thể làm điều này với js như vậy:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}
— George Carlin
nguồn
0 
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
— Praveen Kundu
nguồn
Vui lòng mô tả trong câu trả lời của bạn, vấn đề là gì và đoạn trích này sẽ giải quyết nó như thế nào, để giúp người khác hiểu câu trả lời này
— FZs
-2

sử dụng lớp bootstrap cố định

<div id="footer" class="fixed-bottom w-100">
— Gowtham Sooryaraj
nguồn
Không có dấu hiệu OP đang sử dụng Bootstrap.
— TylerH
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.