741

Cho HTML sau:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Tôi muốn #copyrightdính vào đáy của #container.

Tôi có thể đạt được điều này mà không cần sử dụng định vị tuyệt đối? Nếu thuộc tính float hỗ trợ giá trị 'đáy', có vẻ như điều đó sẽ tạo ra mánh khóe, nhưng thật không may, nó không.

html css

— Dêalal
nguồn

211

Tình huống này là một trong những lý do tại sao các bảng bố trí chưa biến mất. Làm điều này với một bảng là chết đơn giản và làm việc ở khắp mọi nơi. Làm điều này trong CSS rất khó khăn và hỗ trợ nhiều trình duyệt là như vậy. Hãy để một mình rằng không thể nhớ làm thế nào để làm điều đó đúng.

— Tomalak

Tôi không hiểu câu hỏi. Tại sao bạn cần sử dụng định vị tuyệt đối cả? Liệu container có chiều cao được đặt, bất kể nội dung nó chứa là gì?

— HartleySan

924

Có khả năng là không.

Gán position:relativetới #container, và sau đó position:absolute; bottom:0;đến #copyright.

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Mở rộng đoạn trích

— Người dùng
nguồn

11

Nếu vị trí: tương đối trên container của bạn phá vỡ thiết kế của bạn, hãy nhớ rằng bạn chỉ có thể bao gồm một div trình bao bọc bên trong container với chiều cao 100% và thêm vị trí: liên quan đến điều đó thay vào đó.

— Jack chăn cừu

và nếu nó là để lặp lại các yếu tố, cái nào khác sẽ được định vị trên đầu của nhau?

— CRice

6

Một phần tử được định vị tuyệt đối tìm kiếm vị trí gần nhất của nó là vị trí tuyệt đối hoặc tương đối để xác định vị trí của nó. Nếu tất cả thất bại, nó dùng đến cơ thể (cửa sổ). Vì vậy, nhu cầu của cha mẹ là tương đối.

— dùng17753

1

thêm phần dưới cùng vào #container để ngăn chặn bản quyền đối với nội dung trang

— Doc Kodam

1

Cách tiếp cận Flexbox dưới đây là tốt hơn nhiều.

— woohoo

345

Trên thực tế, câu trả lời được chấp nhận bởi @User sẽ chỉ hoạt động nếu cửa sổ cao và nội dung ngắn. Nhưng nếu nội dung cao và cửa sổ ngắn, nó sẽ đưa thông tin bản quyền lên nội dung trang, sau đó cuộn xuống để xem nội dung sẽ để lại cho bạn một thông báo bản quyền nổi. Điều đó làm cho giải pháp này trở nên vô dụng đối với hầu hết các trang (như trang này, thực sự).

Cách phổ biến nhất để thực hiện việc này là cách tiếp cận "CSS footer footer" được trình bày hoặc một biến thể mỏng hơn một chút. Cách tiếp cận này hoạt động rất tốt - NẾU bạn có một chân trang có chiều cao cố định.

Nếu bạn cần một chân trang có chiều cao thay đổi sẽ xuất hiện ở dưới cùng của cửa sổ nếu nội dung quá ngắn và ở dưới cùng của nội dung nếu cửa sổ quá ngắn, bạn sẽ làm gì?

Nuốt niềm tự hào của bạn và sử dụng một bảng.

Ví dụ:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>

Mở rộng đoạn trích

Hãy thử nó. Điều này sẽ hoạt động cho mọi kích thước cửa sổ, cho bất kỳ số lượng nội dung, cho bất kỳ chân trang kích thước nào, trên mọi trình duyệt ... ngay cả IE6.

Nếu bạn đang suy nghĩ về việc sử dụng bảng để bố trí, hãy dành một giây để tự hỏi tại sao. CSS được cho là làm cho cuộc sống của chúng ta dễ dàng hơn - và về tổng thể - nhưng thực tế là ngay cả sau nhiều năm, nó vẫn là một mớ hỗn độn, phản trực giác. Nó không thể giải quyết mọi vấn đề. Nó không đầy đủ.

Bàn không mát, nhưng ít nhất hiện tại, đôi khi chúng là cách tốt nhất để giải quyết vấn đề thiết kế.

— Rick Reilly
nguồn

80

Có vẻ như câu trả lời tốt nhất cho tôi. Ngoài ra, bạn luôn có thể sử dụng "bảng css" (hiển thị: bảng [-row / -cell]) thay vì bảng html. Điều đó cung cấp cùng một bố cục mà không có ngữ nghĩa.

— chiccodoro

1

Nếu bạn có một tập lệnh PHP / tập lệnh khác tạo trang của bạn, bạn có thể sao chép chân trang của mình, sử dụng một tập lệnh làm "miếng đệm" ẩn và một vị trí tuyệt đối. Chân trang spacer đảm bảo rằng cho dù bạn có bao nhiêu nội dung trong phần chân trang, nó sẽ không đi lên trang.

— Tyzoid

20

Đối với những người khác đọc những bình luận này: điều này không liên quan gì đến "niềm tự hào" hay "tuyệt vời". Sử dụng bảng để bố trí thực tế thậm chí còn đau đớn hơn, đặc biệt là đối với số lượng lớn nội dung. Hãy chắc chắn rằng bạn không bỏ lỡ một td và chọn lọc quá nhiều đánh dấu không liên quan khi thêm nội dung là địa ngục. Đó là một nguyên nhân đau đớn vì chúng tôi đang tạo tài liệu HTML không chỉ là bố cục và nếu hầu hết nội dung của tài liệu của chúng tôi không phải là dữ liệu dạng bảng, thì tại sao chúng tôi lại đặt nó vào bảng? Nếu chúng ta không thích sử dụng các công nghệ web theo cách chúng có nghĩa, thì tại sao lại sử dụng chúng? Thay vào đó, hãy sử dụng ứng dụng dành cho máy tính để bàn / thiết bị di động để xuất bản nội dung

— gabe

1

@chiccodoro Tôi đã triển khai một bảng tương đương không có bảng tối thiểu đến mức đáng ngạc nhiên, hãy kiểm tra câu trả lời của tôi dưới đây

— Hashbrown

59

Sự kiêu ngạo là không liên quan. Bảng không nên được sử dụng để bố trí, vì lý do tiếp cận. Nếu bạn đã từng sử dụng trình đọc màn hình, bạn sẽ biết tại sao chỉ nên sử dụng bảng cho dữ liệu dạng bảng. Sử dụng bảng css dưới dạng trạng thái @chiccodoro.

— Matt Fellows

171

Cách tiếp cận flexbox!

Trong các trình duyệt được hỗ trợ , bạn có thể sử dụng như sau:

Ví dụ ở đây

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

Hiển thị đoạn mã

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

Mở rộng đoạn trích

Giải pháp trên có lẽ linh hoạt hơn, tuy nhiên, đây là một giải pháp thay thế:

Ví dụ ở đây

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

Hiển thị đoạn mã

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

Mở rộng đoạn trích

Là một lưu ý phụ, bạn có thể muốn thêm tiền tố nhà cung cấp để được hỗ trợ thêm.

— Josh Crozier
nguồn

3

Còn column-reversecha mẹ thì sao, vậy bạn không cần thêm gì cho con?

— Max Waterman

1

Đây có lẽ nên là câu trả lời được chấp nhận - không hack, không định vị tuyệt đối, tràn hoạt động sạch sẽ khi cần (nó là dành cho tôi).

— Trạng từ

114

Có, bạn có thể làm điều này mà không cần absoluteđịnh vị và không sử dụng tables (vít có đánh dấu và như vậy).

DEMO
Điều này đã được thử nghiệm để hoạt động trên IE> 7, chrome, FF & là một điều thực sự dễ dàng để thêm vào bố cục hiện tại của bạn.

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

Nó thực sự làm những gì float:bottomsẽ, thậm chí tính toán cho vấn đề được chỉ ra trong câu trả lời của @Rick Reilly!

— Hashbrown
nguồn

1

Đẹp! Xin lưu ý, IIRC bạn cần có <!DOCTYPE>bộ để hoạt động trên IE (ít nhất <= 8); những phiên bản cũ hơn chỉ hỗ trợ display:table-XXXtrong chế độ "tiêu chuẩn". Nhưng chế độ tiêu chuẩn cũng sẽ phá vỡ rất nhiều trang được thiết kế cho IE6.

— David

3

Bạn cũng có thể sử dụng flexbox - stackoverflow.com/questions/526035/

— Josh Crozier

2

Tôi tìm thấy nhiều may mắn hơn với .foot{display: table-footer-group}. Tôi không cần vertical-align, heighthoặc border-collapse.

— Jacob Valenta

Điều này sẽ làm việc nếu #containerchỉ chứa #footvà không có nội dung khác?

— Solace

có vẻ như ít nhất nó sẽ cần một không gian không phá vỡ , @Solace

— Hashbrown

20

Đây là một câu hỏi cũ, nhưng đây là một cách tiếp cận độc đáo có thể giúp ích trong một số trường hợp.

CSS thuần túy, không có định vị tuyệt đối, không sửa bất kỳ chiều cao nào, trình duyệt chéo (IE9 +)

kiểm tra Fiddle làm việc

Bởi vì dòng chảy bình thường là 'từ trên xuống dưới', chúng ta không thể đơn giản yêu cầu #copyrightdiv bám sát vào đáy của cha mẹ mình mà không hoàn toàn định vị một loại nào đó, nhưng nếu chúng ta muốn #copyrightdiv bám vào đầu cha mẹ của mình, thì nó sẽ rất đơn giản - bởi vì đây là cách chảy bình thường.

Vì vậy, chúng tôi sẽ sử dụng điều này trong lợi thế của chúng tôi. chúng tôi sẽ thay đổi thứ tự của các divs trong HTML, bây giờ #copyrightdiv ở trên cùng và nội dung theo nó ngay lập tức. chúng tôi cũng làm cho div nội dung trải dài tất cả (sử dụng các yếu tố giả và kỹ thuật xóa)

bây giờ chỉ là vấn đề đảo ngược thứ tự đó trong chế độ xem. có thể dễ dàng thực hiện với chuyển đổi CSS.

Chúng tôi xoay container bằng 180deg, và bây giờ: up-is-down. (và chúng tôi đảo ngược nội dung để trông bình thường trở lại)

Nếu chúng ta muốn có một scroolbar trong khu vực nội dung, chúng ta cần áp dụng thêm một chút phép thuật CSS. như có thể được hiển thị ở đây [trong ví dụ đó, nội dung nằm dưới tiêu đề - nhưng cùng một ý tưởng]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

Mở rộng đoạn trích

— avrahamcool
nguồn

2

Xin đừng, cái nhìn như thế nào khủng khiếp rendering tại là i.stack.imgur.com/ZP9Hw.png

— GRG

7

Tạo một thùng chứa khác divcho các yếu tố trên #copyright. Ngay trên bản quyền thêm một cái mới div: <div style="clear:both;"></div> Nó sẽ buộc chân trang phải ở dưới mọi thứ khác, giống như trong trường hợp sử dụng định vị tương đối ( bottom:0px;).

— Rápli András
nguồn

7

Thử cái này;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

— Gary xanh
nguồn

1

@Feelsbadman Xin đừng thay đổi mã của người khác trong câu trả lời như thế. Nếu bạn đang có ý định tách CSS ra khỏi HTML, xin lưu ý rằng bạn đã vô tình thay đổi mã thành một thứ khác, có thể làm thay đổi câu trả lời và chắc chắn thay đổi ý định của người đăng.

— TylerH

6

Mặc dù không có câu trả lời nào được cung cấp ở đây dường như áp dụng hoặc hoạt động trong trường hợp cụ thể của tôi, tôi đã xem qua bài viết này cung cấp giải pháp gọn gàng này:

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

Tôi thấy nó rất hữu ích cho việc áp dụng thiết kế đáp ứng cho màn hình di động mà không phải sắp xếp lại tất cả mã html của trang web, bodytự đặt nó làm bảng.

Lưu ý rằng chỉ có cái đầu tiên table-footer-grouphoặc table-header-groupsẽ được hiển thị như vậy: nếu có nhiều hơn một, những cái khác sẽ được hiển thị dưới dạng table-row-group.

— Skippy le Grand Gourmetou
nguồn

6

Lưới CSS

Vì việc sử dụng CSS Grid ngày càng tăng, tôi muốn đề xuất align-selfvới phần tử bên trong một thùng chứa lưới.

align-selfcó thể chứa bất kỳ giá trị: end, self-end, flex-endcho ví dụ sau.

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>

Mở rộng đoạn trích

— Manoj Kumar
nguồn

5

Bạn có thể thực alignhộp bottommà không sử dụng position:absolutenếu bạn biết heightcác #containercách sử dụng các liên kết văn bản tính năng của inline-blockcác yếu tố.

Ở đây bạn có thể thấy nó trong hành động.

Đây là mã:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

— jacmkno
nguồn

5

Sử dụng dịchY và thuộc tính hàng đầu

Chỉ cần đặt phần tử con thành vị trí: tương đối và di chuyển lên trên cùng: 100% (đó là chiều cao 100% của cha mẹ) và bám sát phần dưới của cha mẹ bằng cách chuyển đổi: translateY (-100%) (đó là -100% chiều cao của đứa trẻ).

Những lợi ích

bạn không lấy phần tử từ luồng trang
nó là năng động

Nhưng vẫn chỉ là cách giải quyết :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

Đừng quên tiền tố cho trình duyệt cũ hơn.

— Samuell
nguồn

4

Liên kết CodePen tại đây .

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}

<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

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

Mở rộng đoạn trích

— azizarslan
nguồn

3

Nếu bạn muốn nó "dính" xuống đáy, bất kể chiều cao của container, thì định vị tuyệt đối là cách để đi. Tất nhiên, nếu yếu tố bản quyền là yếu tố cuối cùng trong container thì nó sẽ luôn ở dưới cùng.

Bạn có thể mở rộng về câu hỏi của bạn? Giải thích chính xác những gì bạn đang cố gắng làm (và tại sao bạn không muốn sử dụng định vị tuyệt đối)?

— Jack Sleight
nguồn

2

Ngoài ra, nếu có quy định với việc sử dụng position:absolute;hoặc position:relative;, bạn luôn có thể thử padding cha mẹ div hoặc đặt một margin-top:x;. Không phải là một phương pháp rất tốt trong hầu hết các trường hợp, nhưng nó có thể có ích trong một số trường hợp.

— Tiếng vọng ma
nguồn

1

Có lẽ điều này giúp được ai đó: Bạn luôn có thể đặt div bên ngoài div khác và sau đó đẩy nó lên trên bằng cách sử dụng lề âm:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

— DesignConsult
nguồn

1

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Mở rộng đoạn trích

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

Mở rộng đoạn trích

— Anmol Ratan Mohla
nguồn

1

Đừng muốn sử dụng "vị trí: tuyệt đối" cho phần chân trang ở phía dưới. Sau đó, bạn có thể làm theo cách này:

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }

<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

Mở rộng đoạn trích

— móng chân của Nilesh
nguồn

Chào Nilesh; giải pháp này được cung cấp trong nhiều câu trả lời rồi. Hãy chắc chắn đọc tất cả các câu trả lời hiện có cho một câu hỏi trước khi cung cấp một câu hỏi mới, để đảm bảo không có sự trùng lặp nội dung!

— TylerH

1

Nếu bạn không biết chiều cao của khối con:

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

Mở rộng đoạn trích

http://jsbin.com/ULUXIFon/3/edit

Nếu bạn biết chiều cao của khối con, hãy thêm khối con, sau đó thêm padding-top / margin-top:

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

Mở rộng đoạn trích

— zloctb
nguồn

0

Chỉ vì điều này chưa được đề cập ở tất cả, những gì thường hoạt động tốt trong các tình huống như của bạn:

Đặt div bản quyền sau container-div

Bạn sẽ chỉ phải định dạng div bản quyền theo cách tương tự với vùng chứa khác (cùng chiều rộng, định tâm, v.v.), và tất cả đều ổn.

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

Lần duy nhất điều này có thể không lý tưởng là khi div-container của bạn được khai báo height:100%và người dùng sẽ cần phải cuộn xuống để xem bản quyền. Nhưng thậm chí bạn vẫn có thể làm việc xung quanh (ví dụ margin-top:-20px- khi chiều cao của yếu tố bản quyền của bạn là 20px).

Không có định vị tuyệt đối
Không bố trí bảng
Không có css điên, nó trông khác nhau ở mọi trình duyệt khác (ít nhất là IE, bạn biết đấy)
Định dạng đơn giản và rõ ràng

Ngoài ra: Tôi biết OP đã yêu cầu một giải pháp "... dính vào đáy của 'container' div ..." , và không phải thứ gì đó bên dưới, nhưng thôi, mọi người đang tìm giải pháp tốt ở đây, và điều này là một!

— Levite
nguồn

Trong trường hợp của OP, giải pháp này chỉ tốt nếu #copyright có chiều cao cố định (sau đó bạn có thể đặt margin-top: -{element height}.

— Gajus

@Gajus: Đây không phải là định vị tuyệt đối hay cố định. Điều này thực hiện chính xác những gì OP muốn (bất kể chiều cao bản quyền), với ngoại lệ duy nhất là div bản quyền không nằm trong container đầu tiên. OP yêu cầu bản quyền để dán ở dưới cùng của container, không phải trang !!

— Levite

Xin lỗi, ý tôi là nếu # container của container có chiều cao cố định.

— Gajus

Trừ khi tôi nhầm lẫn, vấn đề thực sự mà OP đang cố gắng giải quyết là phần dưới cùng của phần tử khi chiều cao phần tử được quyết định bởi một phần tử khác, ví dụ như với các bình luận jsbin.com/acoVevI/3 . Ở đây bạn không thể chỉ cần đặt nút bên ngoài của container . Để minh họa thêm về vấn đề này, xem jsbin.com/acoVevI/4 .

— Gajus

OP cho biết: "Tôi muốn #copyright bám sát vào đáy của #container.", Vì vậy điều này không hoàn toàn rõ ràng từ câu hỏi. Hơn nữa, đây là một ví dụ hợp lệ cho bất kỳ trường hợp nào chỉ đơn giản là "dính vào đáy của #container". Giải pháp này sẽ hữu ích, có cách tiếp cận sạch sẽ và hoạt động tốt cho nhiều bố cục. Ví dụ: bất kỳ trang nào có nội dung cuộn, như stackoverflow.com ;-)

— Levite

0

Đây là một cách tiếp cận nhằm mục đích làm cho một phần tử có chiều cao và chiều rộng đã biết (ít nhất là xấp xỉ) nổi về bên phải và ở dưới cùng, trong khi hành xử như một phần tử nội tuyến với các phần tử khác. Nó được tập trung ở góc dưới bên phải vì bạn có thể đặt nó dễ dàng ở bất kỳ góc nào khác thông qua các phương pháp khác.

Tôi cần phải tạo một thanh điều hướng có các liên kết thực tế ở phía dưới bên phải và các yếu tố anh chị em ngẫu nhiên, trong khi đảm bảo rằng thanh đó tự kéo dài đúng cách, mà không làm gián đoạn bố cục. Tôi đã sử dụng phần tử "bóng" để chiếm không gian của các liên kết của thanh điều hướng và thêm nó vào cuối các nút con của ngăn chứa.

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

— Zyox
nguồn

0

Không có gì được gọi float:bottomtrong CSS. Cách tốt nhất là sử dụng định vị trong những trường hợp như vậy:

position:absolute;
bottom:0;

— Touhid Rahman
nguồn

Hãy giải thích câu trả lời của bạn.

— Mohit Raj Purohit

0

Đối với những người chỉ có một con trong container, bạn có thể sử dụng table-cellvà vertical-alignphương pháp hoạt động đáng tin cậy để định vị một div duy nhất ở dưới cùng của cha mẹ.

Lưu ý rằng sử dụng table-footer-groupnhư các câu trả lời khác được đề cập sẽ phá vỡ tính toán chiều cao của cha mẹ table.

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}

<div id="container">
    <div id="item">Single bottom item</div>
</div>

Mở rộng đoạn trích

— Hải Trương
nguồn

0

Theo: w3schools.com

Một yếu tố có vị trí: tuyệt đối; được định vị tương đối với tổ tiên định vị gần nhất (thay vì vị trí tương đối với chế độ xem, như cố định).

Vì vậy, bạn cần định vị phần tử cha bằng một cái gì đó tương đối hoặc tuyệt đối, v.v. và đặt phần tử mong muốn thành tuyệt đối và sau đó đặt đáy thành 0.

— Jonas Freire
nguồn

Điều này đã được đề cập trong câu trả lời được chấp nhận (trong số những người khác).

— TylerH

-1

Div của phong cách, position:absolute;bottom:5px;width:100%;đang làm việc, nhưng nó đòi hỏi nhiều tình huống cuộn hơn.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

— tốt đẹp
nguồn

Làm thế nào tôi có thể định vị div của tôi ở dưới cùng của container?

Cách tiếp cận flexbox!

CSS thuần túy, không có định vị tuyệt đối, không sửa bất kỳ chiều cao nào, trình duyệt chéo (IE9 +)

Lưới CSS

Sử dụng dịchY và thuộc tính hàng đầu