Cách căn chỉnh nội dung của phần tử Div xuống dưới cùng – buộc div xuống cuối trang

Hãy xem cách chúng ta có thể căn chỉnh nội dung của một div xuống dưới cùng bằng cách sử dụng phương pháp hiện đại với flexbox. Cũng xem các ví dụ!

Bạn đang xem : buộc div xuống cuối trang

CSS cho phép chúng tôi căn chỉnh nội dung của & lt; div & gt ; phần tử ở dưới cùng với các kỹ thuật đặc biệt. Ngoài ra, chúng tôi có thể căn chỉnh nội dung ở đầu & lt; div & gt ;, ở cuối bên trái hoặc ở bên phải. Chúng ta sẽ thảo luận về tất cả các biến thể có thể có.

Việc này rất dễ dàng nếu bạn làm theo các bước được mô tả bên dưới.

Hãy xem một ví dụ và cố gắng thảo luận từng phần của mã với nhau.

Tạo HTML

  • Tạo

    & lt; div & gt;

    với lớp “main”. Nó bao gồm ba & lt; div & gt; các yếu tố.

  • Đặt thẻ & lt; h2 & gt; vào thẻ & lt; div & gt ;, đầu tiên có tên lớp là “column1”, viết một số nội dung vào đó.
  • & lt; div & gt;

    thứ hai có lớp với tên “column2”.

  • & lt; div & gt;

    thứ ba có id với tên “bottom”.

  

& lt;

body

& gt;

& lt;

div

class

=

" main "

& gt;

& lt;

div

class

=

" column1 "

& gt;

& lt;

h2

& gt;

W3docs

& lt; /

h2

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" column2 "

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt;

div

id

=

" bottom "

& gt;

Nội dung Dưới cùng Div

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

body

& gt;

Thêm CSS

  • Sử dụng các thuộc tính border , height , width position để tạo kiểu cho lớp “main”. Thuộc tính

    float

    xác định các phần tử sẽ được đặt ở phía nào của vùng chứa. Thuộc tính

    position

    chỉ định vị trí của phần tử trong tài liệu.

  • Đặt color cho văn bản của

    & lt; div & gt;

    đầu tiên. Trong ví dụ này, chúng tôi sử dụng giá trị “hex” cho màu sắc.

  • Sử dụng thuộc tính text-align để căn chỉnh nội dung bên trong của phần tử khối.
  • Sử dụng các thuộc tính dưới cùng bên trái . Thuộc tính bottom chỉ định vị trí dưới cùng của một phần tử cùng với thuộc tính

    position

    . Thuộc tính

    left

    chỉ định vị trí bên trái của một phần tử cùng với thuộc tính

    position

    .

Thuộc tính

float

bị bỏ qua nếu các phần tử được định vị tuyệt đối (position: tuyệt đối).

  

. main

{

border

:

1px

solid

# 4287f5

;

height

:

180px

;

width

:

500px

;

vị trí

: tương đối; }

. column1

{

color

:

# 4287f5

;

text-align

: center; }

. column2

{

text-align

: center; }

# bottom

{

vị trí

: tuyệt đối;

bottom

:

0

;

còn lại

:

0

; }

Hãy tập hợp các phần của mã lại với nhau và xem nó hoạt động như thế nào!

Ví dụ về căn chỉnh nội dung ở phía dưới bên trái:


& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. main

{

border

:

1px

solid

# 4287f5

;

height

:

180px

;

width

:

500px

;

vị trí

: tương đối; }

. column1

{

color

:

# 4287f5

;

text-align

: center; }

. column2

{

text-align

: center; }

# bottom

{

vị trí

: tuyệt đối;

bottom

:

0

;

còn lại

:

0

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" main "

& gt;

& lt;

div

class

=

" column1 "

& gt;

& lt;

h2

& gt;

W3docs

& lt; /

h2

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" column2 "

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt;

div

id

=

" bottom "

& gt;

Nội dung Dưới cùng Div

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

W3docs

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

Phần nội dung dưới cùng

Trong ví dụ sau, nội dung của & lt; div & gt; được căn chỉnh ở phía dưới cùng ở phía bên phải.

Ví dụ về căn chỉnh nội dung ở phía dưới bên phải:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. main

{

border

:

1px

solid

# 4287f5

;

float

: left;

height

:

180px

;

width

:

500px

;

vị trí

: tương đối; }

. column1

{

color

:

# 4287f5

;

text-align

: center; }

. column2

{

text-align

: center; }

# bottom

{

vị trí

: tuyệt đối;

bottom

:

0

;

right

:

0

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" main "

& gt;

& lt;

div

class

=

" column1 "

& gt;

& lt;

h2

& gt;

W3docs

& lt; /

h2

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" column2 "

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt;

div

id

=

" bottom "

& gt;

Nội dung Dưới cùng Div

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Trong ví dụ tiếp theo của chúng tôi, nội dung của & lt; div & gt; được căn chỉnh ở dưới cùng ở trung tâm. Chúng tôi đặt chiều rộng của đáy & lt; div & gt; thành “100%”.

Ví dụ về căn chỉnh nội dung ở giữa dưới cùng:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. main

{

border

:

1px

solid

# 4287f5

;

float

: left;

height

:

180px

;

width

:

500px

;

vị trí

: tương đối;

text-align

: center; }

. column1

{

color

:

# 4287f5

; }

# bottom

{

vị trí

: tuyệt đối;

bottom

:

0

;

width

:

100%

;

color

:

# ffffff

;

background-color

: blue;

padding

:

15px

0

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

div

class

=

" main "

& gt;

& lt;

div

class

=

" column1 "

& gt;

& lt;

h2

& gt;

W3docs

& lt; /

h2

& gt;

& lt; /

div

& gt;

& lt;

div

class

=

" column2 "

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ.

& lt; /

div

& gt;

& lt;

div

id

=

" bottom "

& gt;

Nội dung Dưới cùng Div

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Hãy xem một ví dụ khác, trong đó nội dung của & lt; div & gt; được căn chỉnh cho chính giữa bằng flexbox . Flexbox
là một bố cục một chiều, có nghĩa là nó đặt các mục trong một thứ nguyên tại một thời điểm, dưới dạng một hàng hoặc cột, nhưng không phải cả hai cùng nhau. Trong ví dụ sau, chúng tôi sử dụng flex-direction thuộc tính với giá trị “cột”. Thuộc tính flex-direction xác định trục chính của vùng chứa flex và đặt thứ tự, trong đó các mục flex xuất hiện. Thuộc tính justify-content sắp xếp các mục khi các mục không sử dụng hết không gian có sẵn theo chiều ngang. Giá trị “khoảng trắng giữa” được sử dụng với thuộc tính justify-content khi có khoảng cách giữa các dòng của các mục.

Thuộc tính

justify-content

phải được sử dụng với

Thuộc tính phải được sử dụng với display thuộc tính được đặt thành “flex”. Để căn chỉnh các mục theo chiều dọc, hãy sử dụng thuộc tính align-items .

Ví dụ về việc căn chỉnh nội dung xuống dưới cùng với Flexbox:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

main

{

border

:

1px

màu xanh lam đặc;

height

:

150px

;

display

: flex;

flex-direction

: column;

justify-content

: space-between; }

h2

{

margin

:

0

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

main

& gt;

& lt;

h2

& gt;

Tiêu đề đầu trang

& lt; /

h2

& gt;

Một số văn bản căn chỉnh ở cuối

& lt; /

main

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Dưới đây, bạn có thể xem một ví dụ khác với thuộc tính CSS align-items. Nó xác định căn chỉnh mặc định cho các mục linh hoạt. Nó giống như thuộc tính justify-content nhưng là phiên bản dọc.

Một số trình duyệt không hỗ trợ display: flex. Sử dụng các tiền tố được liệt kê bên dưới.

  

display

: -webkit-box ;

display

: -webkit-flex;

display

: -ms-flexbox;

display

: flex;

Chúng ta phải sử dụng các tiện ích mở rộng -Webkit- và -Moz- với thuộc tính

align-items

, vì nó sẽ được tất cả các trình duyệt hỗ trợ.

Ví dụ về việc căn chỉnh nội dung cho dưới cùng với thuộc tính align-items:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

main

{

border

:

1px

màu xanh lục đặc;

background-color

: xanh lục;

color

:

# ffffff

;

padding

:

20px

;

display

: -webkit-box;

display

: -webkit-flex;

display

: -ms-flexbox;

display

: flex;

height

:

150px

;

flex-direction

: column; }

h2

{

margin

:

0

; }

p

{

display

: -webkit-box;

hiển thị

: -webkit-flex;

display

: -ms-flexbox;

display

: flex;

height

:

150px

; -webkit-box-align: end; -webkit-

align-items

: flex-end; -ms-

flex

-align: end;

align-items

: flex-end;

margin

:

0

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

main

& gt;

& lt;

h2

& gt;

Tiêu đề đầu trang

& lt; /

h2

& gt;

& lt;

p

& gt;

Một số văn bản căn chỉnh ở cuối

& lt ; /

p

& gt;

& lt; /

chính

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Hãy xem một ví dụ khác với thuộc tính vị trí. Trong ví dụ đầu tiên, chúng tôi sử dụng thuộc tính vị trí với giá trị “tương đối” cho HTML & lt; main & gt;
và với giá trị “cố định” cho & lt; div & gt ;. Thuộc tính z-index chỉ định thứ tự z của một phần tử và các mục con hoặc linh hoạt của nó.

Thuộc tính

z-index

chỉ ảnh hưởng đến các phần tử được định vị.

Ví dụ căn chỉnh nội dung ở cuối với giá trị “cố định” của thuộc tính vị trí:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

* {

margin

:

0

;

padding

:

0

; }

main

{

vị trí

: tương đối; }

div

{

background-color

: màu vàng;

height

:

200px

;

width

:

100%

;

vị trí

: cố định;

bottom

:

0

;

z-index

:

1

;

border-top

:

2px

vàng nguyên khối; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

main

& gt;

& lt;

h2

& gt;

Đây là tiêu đề

& lt; /

h2

& gt;

& lt;

div

& gt;

Một số văn bản căn chỉnh ở cuối

& lt ; /

div

& gt;

& lt; /

chính

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề buộc div xuống cuối trang

NALA Tập 8 – Đề thi cấp vũ trụ: Dám yêu cô gái “hệ tâm linh”, chơi Tarot? | Người Ấy Là Ai? 2022

  • Tác giả: Vie GIẢITRÍ
  • Ngày đăng: 2022-07-08
  • Đánh giá: 4 ⭐ ( 8290 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: NgườiẤyLàAi Mùa4 VieChannel
    NguoiAyLaAiMua4 NALA4 NALA Tập8 NgườiẤyLàAi2022
    VieChannelHTV2 VieGIẢITRÍ VieON
    TrấnThành MinhTú KhảNhư QuangTrung LâmVỹDạ NgaLinh

    Đón xem Người Ấy Là Ai? – Mùa 4 vào Thứ 6 hàng tuần lúc:
    🔥 20h00 trên kênh truyền hình Vie Channel – HTV2, Vie GIẢITRÍ và ứng dụng VieON.
    🔥 22h00 trên Kênh Youtube Vie Channel – HTV2

    📣 Đừng quên subscribe để xem thật nhiều phim mới nhé!
    🎈 Subscribe ngay: http://bit.ly/VieChannelHTV2

    Xem các chương trình hấp dẫn khác của Vie Channel – HTV2:
    ►Người Ấy Là Ai Full: https://bit.ly/NALASS4
    ►Rap Việt Full: https://bit.ly/RapVietMua2
    ►Siêu Thử Thách: https://bit.ly/SieuThuThachFull
    ►Siêu Trí Tuệ Full: https://bit.ly/SieuTriTue_Mua2_Full
    ►Cây Táo Nở Hoa Full: https://bit.ly/CayTaoNoHoaFull

    Hoặc xem thêm trên hệ thống Vie Channel – HTV2:
    ►Website: http://viechannel.vn/
    ►Fanpage: https://www.facebook.com/VieChannelHTV2/
    ►Instagram: https://www.instagram.com/viechannelhtv2/

Làm thế nào để căn chỉnh chân trang (div) xuống cuối trang?

  • Tác giả: vi.visionaryschoolof-arts.org
  • Đánh giá: 3 ⭐ ( 8744 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bất cứ ai có thể giải thích làm thế nào để căn chỉnh một div chân trang với cuối trang. Từ các ví dụ tôi đã thấy, tất cả chúng đều cho thấy cách làm cho div luôn hiển thị ở cuối, bất kể bạn đã cuộn ở đâu …

Cách làm cố định menu khi kéo chuột xuống phí dưới website

  • Tác giả: thinhweb.com
  • Đánh giá: 5 ⭐ ( 4636 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Jquery cố định menu khi kéo thanh scroll của website xuống. Cách cố định menu bằng Jquery cho website. Cố định menu web b ằng position: fixed

Làm cách nào để buộc một khối DIV mở rộng xuống cuối trang ngay cả khi nó không có nội dung?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 9622 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Vấn đề của bạn không phải là div không ở độ cao 100%, mà là thùng…

Cấu trúc trang HTML cơ bản

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 7266 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Theo truyền thống, một ví dụ HTML đầu tiên – Chào mừng đến với khóa học HTML cơ bản, một ví dụ đơn giản cho cái nhìn đầu tiên về HTML.

Mách bạn những cách cố định footer ở cuối trang web trong CSS – TICHCHU.COM

  • Tác giả: tichchu.com
  • Đánh giá: 3 ⭐ ( 6043 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách Tạo 2 Thẻ Div Ngang Nhau, Cùng 1 Dòng : U

  • Tác giả: daihoangde.vn
  • Đánh giá: 5 ⭐ ( 2841 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu ai đã từng làm việc với CSS, chắc ko hề lạ gì 2 khái niệm float và clearfix, tuy nhiên có thể một số bạn cứ biết chức năng của nó và cứ dùng vậy thôi chứ ko biết (hoặc ko thèm quan tâm) tại sao dùng nó thì có tác dụng như vậy, Bài viết sau mình sẽ quay về cơ bản một tí để giải thích cụ thể chức năng và cơ chế hoạt động của 2 khái niệm này

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Nối bằng Python - Cách nối vào một danh sách hoặc một mảng - python thêm các mục vào mảng