Làm cách nào để căn chỉnh nội dung của div xuống đáy

1164

Nói rằng tôi có mã CSS và HTML sau đây:

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

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

Phần tiêu đề là chiều cao cố định, nhưng nội dung tiêu đề có thể thay đổi.

Tôi muốn nội dung của tiêu đề được căn chỉnh theo chiều dọc ở dưới cùng của phần tiêu đề, vì vậy dòng văn bản cuối cùng "dính" vào cuối phần tiêu đề.

Vì vậy, nếu chỉ có một dòng văn bản, nó sẽ như sau:

-----------------------------
| Tiêu đề
|
|
|
| nội dung tiêu đề (kết quả trong một dòng)
-----------------------------

Và nếu có ba dòng:

-----------------------------
| Tiêu đề
|
| nội dung tiêu đề (đó là như vậy
| nhiều thứ mà nó hoàn hảo
| trải dài trên ba dòng)
-----------------------------

Làm thế nào điều này có thể được thực hiện trong CSS?

html css vertical-alignment

— mẹ con
nguồn

1322

Định vị tương đối + tuyệt đối là đặt cược tốt nhất của bạn:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

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

Nhưng bạn có thể gặp vấn đề với điều đó. Khi tôi thử nó, tôi gặp vấn đề với menu thả xuống xuất hiện bên dưới nội dung. Nó không đẹp.

Thành thật mà nói, đối với các vấn đề định tâm dọc và, tốt, bất kỳ vấn đề căn chỉnh dọc nào với các mục không có chiều cao cố định, việc sử dụng bảng sẽ dễ dàng hơn.

Ví dụ: Bạn có thể thực hiện bố cục HTML này mà không cần sử dụng bảng không?

— cletus
nguồn

4

Tôi thực sự tìm thấy giải pháp đó trước khi hỏi ở đây, nhưng bằng cách nào đó đã quên thêm vị trí: tương đối; đến div tiêu đề và nội dung được giữ ở cuối trang. Cảm ơn

— kristof

15

Bạn có thể quản lý vị trí thả xuống của mình với thuộc tính z-index để đưa nó lên phía trước. Hãy nhớ rằng thuộc tính z-index hoạt động với các phần tử được định vị tương đối hoặc tuyệt đối. Ngoài ra, không đúng về mặt ngữ nghĩa để sử dụng bảng để đạt được kết quả bố cục.

— Alejandro García Iglesias

1

Trong trường hợp nội dung văn bản như được mô tả trong vấn đề ban đầu, # nội dung tiêu đề thực sự phải là một pyếu tố hoặc ít nhất làspan

— Josh Burgess

2

Đừng sử dụng bảng cho dữ liệu không phải bảng! Thay vào đó, sử dụng các thuộc tính hiển thị CSS display: table-cell, hoặc table-row, hoặc table. Bạn không bao giờ cần phải sử dụng bảng để bố trí thuần túy.

— Jeremy Moritz

1

Vị trí tiêu đề có liên quan gì?

— stack1

158

Sử dụng định vị CSS:

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

Như cletus đã lưu ý , bạn cần xác định nội dung tiêu đề để thực hiện công việc này.

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

— Patrick McElhaney
nguồn

4

fyi ... điều này khiến nội dung tiêu đề của tôi bị thu hẹp chiều rộng của nó, vì vậy tôi đã phải thêm một width = '100%'nội dung trên tiêu đề

— dsdsdsdsd

2

@dsdsdsdsd Bạn cũng có thể khắc phục điều đó bằng cách thêm display: block vào # title-content.

— Patrick McElhaney

1

@dsdsdsdsd Lý do là vì <span>các phần tử có display: inline;mặc định, không chiếm toàn bộ chiều rộng của container. Cách khắc phục thích hợp nhất là thay đổi nhịp thành a <div>, là phần tử khối theo mặc định.

— BadHorsie

1

Hoặc một trong <h1> - <h6> cũng bị chặn theo mặc định và xác định văn bản là tiêu đề, rất hữu ích cho các công cụ tìm kiếm, công nghệ hỗ trợ và những người đọc mã.

— Patrick McElhaney

Không hoạt động khi nội dung ở phía dưới có chiều cao thay đổi, khiến nó mở rộng ra khỏi giới hạn container.

— Mozfet

126

Nếu bạn không lo lắng về các trình duyệt cũ, hãy sử dụng flexbox.

Phần tử cha cần kiểu hiển thị của nó được đặt thành flex

div.parent {
  display: flex;
  height: 100%;
}

Sau đó, bạn đặt tự sắp xếp của phần tử con thành flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Đây là tài nguyên tôi đã sử dụng để tìm hiểu: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

— Lee Irvine
nguồn

@bafromca, hai lý do không hoạt động. 1: Sử dụng 'align-self' thay vì align-item (lỗi của tôi, tôi đã chỉnh sửa bài đăng gốc của mình). 2: 100% chiều cao sẽ không hoạt động trừ khi cha mẹ có chiều cao.

— Lee Irvine

Không làm việc cho tôi, tôi muốn nó ở dưới cùng của container, không phải là cuối của các mục trong container.

— Mozfet

Năm 2020, đây phải là câu trả lời đúng: caniuse.com/#feat=flexbox

— tonygatta

119

Tôi sử dụng các tính chất này và nó hoạt động!

#header {
  display: table-cell;
  vertical-align: bottom;
}

— johannchopin
nguồn

42

Không được hỗ trợ trong IE8 trở về trước. Nó được hỗ trợ trong IE9.

— Random_user_name

23

@cale_b Theo caniuse.com, nó KHÔNG hoạt động trong IE8.

— Zach Lysobey

5

@ZachL Happenstance - Tôi đang hỗ trợ một ứng dụng cũ trong IE8 cho một khách hàng doanh nghiệp và điều này thực tế hoạt động.

— Daniel Szabo

4

@fguillen: vừa được thử nghiệm trong Chrome (v31). Làm việc ở đó, quá.

— Daniel Szabo

5

table-cellphá vỡ rất nhiều thứ. Giống như hệ thống lưới Bootstrap. col-md-12sẽ không cung cấp cho bạn một div rộng 100% nữa.

— Nô

65

Sau một thời gian vật lộn với vấn đề này, cuối cùng tôi cũng tìm ra một giải pháp đáp ứng tất cả các yêu cầu của mình:

Không yêu cầu tôi biết chiều cao của container.
Không giống như các giải pháp tương đối + tuyệt đối, nội dung không nổi trong lớp riêng của nó (nghĩa là, nó nhúng bình thường trong div container).
Hoạt động trên các trình duyệt (IE8 +).
Đơn giản để thực hiện.

Giải pháp chỉ cần một <div>, mà tôi gọi là "aligner":

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

Thủ thuật này hoạt động bằng cách tạo ra một div cao, gầy, đẩy đường cơ sở văn bản xuống dưới cùng của container.

Dưới đây là một ví dụ hoàn chỉnh đạt được những gì OP yêu cầu. Tôi đã làm cho "bottom_aligner" dày và đỏ chỉ nhằm mục đích trình diễn.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Căn chỉnh nội dung dưới cùng

— Greg Prisament
nguồn

Gần như hoàn hảo :) nhưng nó không cho phép ngắt dòng tự động.

— Gaston Sanchez

Không hoạt động nếu thùng chứa bên ngoài có thể cuộn (tràn-y: auto). :(

— ecraig12345

Tôi đoán rằng marin: 8px nên là lề: 8px

— Graham Perrin

2

Điều này cũng hoạt động nếu được đặt trong một ::beforequy tắc, loại bỏ sự cần thiết của một yếu tố phụ. Chúng tôi đã sử dụng flex ở cuối, nhưng điều này hữu ích khi bạn không thể.

— Sheepy

Đây là một giải pháp thực sự tốt đẹp. Nó chỉ hoạt động nếu heighthộp / thùng chứa và cha mẹ của nó được đặt (thành px hoặc% hoặc bất cứ thứ gì).

— BairDev

38

Cách hiện đại để làm điều đó là sử dụng flexbox . Xem ví dụ dưới đây. Bạn thậm chí không cần phải bọc Some text...bất kỳ thẻ HTML nào, vì văn bản được chứa trực tiếp trong thùng chứa flex được bọc trong một mục flex ẩn danh.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

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

Nếu chỉ có một số văn bản và bạn muốn căn chỉnh theo chiều dọc đến dưới cùng của container.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

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

— Nhãn dán
nguồn

2

Tôi cần yếu tố liên kết dưới cùng của tôi vẫn hiện diện trong luồng tài liệu, điều này là không thể khi sử dụng position:absolute;. Giải pháp này hoạt động hoàn hảo cho trường hợp của tôi!

— Swen

1

Bên trong các thành phần phản ứng, đây là giải pháp đúng. Các giải pháp được chấp nhận thất bại.

— Soleil - Mathieu Prévot

1

Đây là giải pháp duy nhất thực sự hiệu quả với tôi. Có lẽ nó liên quan đến React, như @Soleil đã đề cập ... Tôi không phải là chuyên gia CSS, vì vậy tôi không hoàn toàn chắc chắn.

— BK

Hoạt động hoàn hảo trong thành phần phản ứng

— user1155773

25

Các phần tử nội tuyến hoặc khối nội tuyến có thể được căn chỉnh ở dưới cùng của các phần tử mức khối nếu chiều cao dòng của phần tử cha / khối lớn hơn phần tử nội tuyến. *

đánh dấu:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* đảm bảo bạn đang ở chế độ tiêu chuẩn

— đôi
nguồn

25

display: flex;
align-items: flex-end;

— người dùng3053247
nguồn

2

Lưu ý rằng flexbox không được hỗ trợ tốt trong các trình duyệt cũ.

— AnthonyB

11

@AnthonyB - định nghĩa cũ? Chúng tôi phải thay đổi hồ sơ này là nhà phát triển. Công nghệ tiến lên phía trước, và cái cũ đơn giản là không tồn tại. IE9 và 10 có vấn đề với flex từ những gì tôi có thể thấy, nhưng chúng đã được phát hành lần lượt vào năm 2011 và 2012 ... đó là năm 2017. Chúng ta phải loại bỏ các trình duyệt lỗi thời và lỗi thời này. Nếu không phải để thỏa mãn thị giác, nhưng để bảo mật và cập nhật phần mềm nói chung.

— Tisch

3

@Tisch bạn hoàn toàn đúng, chúng tôi phải, là nhà phát triển, sử dụng công nghệ tốt và gần đây. Nhưng tôi chỉ đơn giản là cảnh báo về vấn đề tương thích này, để không ngạc nhiên.

— AnthonyB

nếu nội dung bên dưới <h1>là bên trong <p>hoặc <div>tôi sẽ sử dụng justify-content: space-between.

— agapitocandemor

11

Bạn có thể đơn giản đạt được flex

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

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

— MK Vimalan
nguồn

6

Nếu bạn có nhiều mục chiều cao động, hãy sử dụng các giá trị hiển thị CSS của bảng và ô bảng:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

Tôi đã tạo một bản demo JSBin tại đây: http://jsbin.com/INOnAkuF/2/edit

Bản demo cũng có một ví dụ về cách căn giữa theo chiều dọc bằng cách sử dụng kỹ thuật tương tự.

— romiem
nguồn

5

Đây là một giải pháp khác sử dụng flexbox nhưng không sử dụng flex-end để căn chỉnh đáy. Ý tưởng là đặt margin-bottomtrên h1 để tự động đẩy nội dung còn lại xuống dưới cùng:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

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

Chúng ta cũng có thể làm tương tự với margin-top:autotrên văn bản nhưng trong trường hợp này chúng ta cần bọc nó bên trong một divhoặc span:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

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

— Temani Afif
nguồn

Hoàn hảo! gracias

— Grace Nikole

4

Bạn không cần tuyệt đối + tương đối cho việc này. Rất có thể sử dụng vị trí tương đối cho cả container và dữ liệu. Đây là cách bạn làm điều đó.

Giả sử chiều cao của dữ liệu của bạn sẽ được x. Container của bạn là tương đối và footer cũng là tương đối. Tất cả bạn phải làm là thêm vào dữ liệu của bạn

bottom: -webkit-calc(-100% + x);

Dữ liệu của bạn sẽ luôn ở dưới cùng của container của bạn. Hoạt động ngay cả khi bạn có container với chiều cao động.

HTML sẽ như thế này

<div class="container">
  <div class="data"></div>
</div>

CSS sẽ như thế này

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Ví dụ trực tiếp tại đây

Hi vọng điêu nay co ich.

— Aditya Ponkshe
nguồn

Bạn có thể giải thích những gì bottom: -webkit-calc(-100% + x);đang làm?

— mhatch

@mhatch nó giữ chân trang ở dưới cùng của container.

— Aditya Ponkshe

4

Đây là cách linh hoạt để làm điều đó. Tất nhiên, nó không được IE8 hỗ trợ, vì người dùng cần 7 năm trước. Tùy thuộc vào những gì bạn cần hỗ trợ, một số trong số này có thể được thực hiện với.

Tuy nhiên, sẽ thật tuyệt nếu có một cách để làm điều này mà không có thùng chứa bên ngoài, chỉ cần có văn bản tự sắp xếp trong chính nó.

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

— absynthe web smith
nguồn

4

một giải pháp rất đơn giản, một dòng, là thêm dòng thứ tự vào div, lưu ý rằng tất cả văn bản của div sẽ ở dưới cùng.

CSS:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

Hãy nhớ rằng đây là một giải pháp thiết thực và nhanh chóng khi bạn chỉ muốn văn bản bên trong div bị hỏng, nếu bạn cần kết hợp hình ảnh và nội dung, bạn sẽ phải viết mã CSS phức tạp và nhạy hơn một chút

— Pablo Tương phản
nguồn

3

nếu bạn có thể đặt chiều cao của div gói nội dung (# nội dung tiêu đề như được hiển thị trong câu trả lời của người khác), thay vì toàn bộ #header, có lẽ bạn cũng có thể thử phương pháp này:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

hiển thị trên codepen

— cá tuyết
nguồn

3

Có vẻ như đang làm việc:

HTML: Tôi ở dưới cùng

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

— Quản trị tập tin3
nguồn

3

Tất cả những câu trả lời này và không có câu trả lời nào phù hợp với tôi ... Tôi không phải là chuyên gia về flexbox, nhưng điều này khá dễ để tìm ra, nó rất đơn giản và dễ hiểu và dễ sử dụng. Để tách một cái gì đó khỏi phần còn lại của nội dung, hãy chèn một div trống và để nó phát triển để lấp đầy khoảng trống.

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

Điều này phản ứng như mong đợi khi nội dung dưới cùng không có kích thước cố định khi thùng chứa không có kích thước cố định.

— Mozfet
nguồn

3

Tôi đã nghĩ ra một cách đơn giản hơn nhiều so với những gì đã được đề cập.

Đặt chiều cao của div tiêu đề. Sau đó, bên trong đó, phong cách H1thẻ của bạn như sau:

float: left;
padding: 90px 10px 11px

Tôi đang làm việc trên một trang web cho một khách hàng và thiết kế yêu cầu văn bản phải ở dưới cùng của một div nhất định. Tôi đã đạt được kết quả bằng hai dòng này và nó hoạt động tốt. Ngoài ra, nếu văn bản mở rộng, phần đệm sẽ vẫn giữ nguyên.

— mickburkejnr
nguồn

1

Sẽ khiến nội dung nổi trên các nội dung khác khi thay đổi kích thước màn hình bằng cách sử dụng bố cục đáp ứng.

— Mozfet

2

Tôi tìm thấy giải pháp này bassed trên một mẫu bắt đầu bootstrap mặc định

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

— XMaster
nguồn

2

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

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

— người dùng841657
nguồn

1

Điều này gây ra thay đổi kích thước của div hàng đầu. Cái nào hoạt động cho bố cục văn bản cơ bản, nhưng không hoạt động khi mọi thứ có nền và màu sắc và kích thước để tôn trọng.

— Mozfet

0

thử với:

div.myclass { margin-top: 100%; }

hãy thử thay đổi% để sửa nó. Ví dụ: 120% hoặc 90% ... vv.

— felix
nguồn

Hoạt động hoàn toàn tốt với 1 bộ nội dung, nhưng sẽ cần phải điều chỉnh nếu nội dung thay đổi. Nếu đó là nội dung động, thì đừng sử dụng nội dung này!

— Mike Graf

0

Trang web tôi vừa làm cho một khách hàng yêu cầu văn bản chân trang là một hộp cao, với văn bản ở phía dưới tôi đã đạt được điều này với phần đệm đơn giản, nên hoạt động cho tất cả các trình duyệt.

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

— Nicki L. Hansen
nguồn

1

Khai báo đầu tiên của bạn padding: 0 30pxlà một chút dư thừa, bạn cũng có thể đã đặt padding: 30pxsau đó 2 khai báo khác.

— Andrew

Hoàn toàn đúng, tuy nhiên tôi đang theo dõi các hoạt động tại nơi làm việc của tôi.

— Nicki L. Hansen

6

Thật sao?, Có vẻ như thực hành xấu đơn giản . Chỉ cần sử dụng tốc ký, hoặc rõ ràng ở mọi nơi. padding: 60px 30px 8px;,, padding: 60px 30px 8px 30px;bốn padding-quy tắc rõ ràng hoặc thậm chí đề xuất của @ TheWaxMann đều vượt trội - và tôi sẵn sàng và có thể lập luận rằng một ;-)

— Zach Lysobey

-3

Một ví dụ trình duyệt chéo hoàn hảo có lẽ là ví dụ này ở đây:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

Ý tưởng là cả hai để hiển thị div ở phía dưới và cũng làm cho nó dính ở đó. Thông thường cách tiếp cận đơn giản sẽ làm cho div dính cuộn lên với nội dung chính.

Sau đây là một ví dụ tối thiểu làm việc đầy đủ. Lưu ý rằng không có mánh khóe nhúng div. Nhiều BR chỉ để buộc một thanh cuộn xuất hiện:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

Nếu bạn đang tự hỏi mã của bạn có thể không hoạt động trên IE, hãy nhớ thêm thẻ DOCTYPE ở trên cùng. Điều này rất quan trọng để làm việc trên IE. Ngoài ra, đây phải là thẻ đầu tiên và không có gì xuất hiện phía trên nó.

— Giả mạo
nguồn

28

Vì bạn đang tuyên bố tài liệu của mình là XHTML nghiêm ngặt, bạn cũng nên tự đóng các <br />thẻ của mình ...

— Amos M. Carpenter

7

@ KarlKildén nếu bạn đang tham khảo bình luận từ aaamos, thì đó chắc chắn không phải là một bình luận ngớ ngẩn - phục vụ tài liệu trên với tiêu đề chính xáccontent-type của nó sẽ dẫn đến trình duyệt đưa ra lỗi phân tích xml.

— Dao cạo

7

Đây là một thực hành xấu! Sử dụng CSS thay thế!

— m93a

-4

Có vẻ như đang làm việc:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Việc sử dụng ít hơn giúp giải các câu đố CSS giống như mã hóa hơn là ... Tôi chỉ thích CSS. Đó là một niềm vui thực sự khi bạn có thể thay đổi toàn bộ bố cục (mà không phá vỡ nó :) chỉ bằng cách thay đổi một tham số.

— đặc biệt
nguồn

-7

Giải pháp 2015

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

chào mừng bạn

— waza123
nguồn

3

Bảng bố trí cho điều này có thể có vấn đề; CSS được đề nghị thay thế. Thuộc tính valign cũng không được hỗ trợ trong HTML5. (xem w3schools.com/tags/att_td_valign.asp )

— không thể phủ nhận