Chân trang chính xác. Tầng hầm cố định
02.05.15 21.5KĐây là một loại ác mộng! Tại sao phần chân trang của trang web của bạn lại “xuất hiện” và thay đổi thiết kế? Có thực sự không thể nhấn chân trang xuống cuối trang một cách chính xác bằng thứ gì đó không? Ít nhất là nội dung hoặc gạch! Brick không vừa với màn hình?
Tôi hiểu rồi, sau đó ngồi không làm gì cho đến khi bạn đọc hết bài viết của chúng tôi.
Tạo chân trang phù hợp cho trang web của bạn
Nhiều chủ sở hữu trang web gặp phải vấn đề này khi phần chân trang chỉ nổi lên trên cùng. Và sau đó không rõ phải làm gì. Thông thường, các thiết kế trang web được bạn tự mình thực hiện một cách vội vàng sẽ gặp phải nhược điểm này ( khoanh tròn “bàn tay điên”) hoặc quản trị viên web mới làm quen.
Đồng thời, không có gì khủng khiếp xảy ra trong giai đoạn đầu tiên của vòng đời trang web. Và câu thành ngữ này vẫn tiếp tục cho đến khi nội dung đặt “sức nặng của nó” xuống tầng hầm, ngăn không cho nó trồi lên. Tuy nhiên, đáng để đặt khối lượng tài liệu nhỏ hơn trên trang và phần chân trang “bình tĩnh” gần đây sẽ ngay lập tức vươn lên dẫn đầu, khiến toàn bộ thiết kế của trang web có giao diện không phù hợp.
Để loại bỏ “khiếm khuyết” này của mẫu được thiết kế, không cần thiết phải chi tiền cho dịch vụ của quản trị trang web. Thông thường, chân trang của trang có thể được tự đặt đúng vị trí. Hãy xem xét tất cả các lựa chọn có thể để loại bỏ vấn đề này:
Cách đầu tiên
Cách đầu tiên để neo chân trang vào cuối trang là dựa trên CSS. Trước tiên, hãy đưa ra mã ví dụ và sau đó xem xét kỹ hơn cách triển khai nó:
html ( chiều cao: 100%; ) tiêu đề, điều hướng, phần, bài viết, sang một bên, chân trang ( hiển thị: khối; ) nội dung ( chiều cao: 100%; ) #wrapper ( chiều rộng: 1000px; lề: 0 tự động; chiều cao tối thiểu: 100 %; chiều cao: tự động !quan trọng; chiều cao: 100%; ) #header ( chiều cao: 150px; màu nền: rgb(0,255,255); ) #content ( phần đệm: 100px; chiều cao: 400px; màu nền: rgb(51,255,102) ; ) #footer ( chiều rộng: 1000px; lề: -100px tự động 0; chiều cao: 100px; vị trí: tương đối; màu nền: rgb(51,51,204); )
Để đính kèm thẻ chân trang vào cuối trang
html ( chiều cao: 100%; ) nội dung ( chiều cao: 100%; )
Chúng tôi cũng đặt chiều cao tối thiểu của lớp container là 100%. Trong trường hợp chiều rộng của nội dung lớn hơn chiều cao của vùng chứa, hãy đặt thuộc tính thành auto. Nhờ đó, trình bao bọc sẽ tự động điều chỉnh theo độ rộng của nội dung được đặt trên trang:
#wrapper ( chiều cao tối thiểu: 100%; chiều cao: tự động !quan trọng; chiều cao: 100%; )
Dòng mã "height: 100%" dành cho các phiên bản IE cũ hơn không chấp nhận thuộc tính chiều cao tối thiểu.
Để tách khoảng trống cho chân trang trong thiết kế trang, chúng ta đặt thụt lề cho thẻ
#content ( đệm: 100px; )
Ở giai đoạn này, chúng ta có một trang web toàn màn hình và có thêm 100 pixel, được “trung hòa” bằng giá trị lề âm cho chân trang (lề: -100px) khi vị trí của nó được đặt ở mức tương đối (vị trí: liên quan đến). Vì vậy, bằng cách sử dụng giá trị đệm âm, chúng ta "kéo" chân trang vào khu vực của vùng chứa có chiều cao được đặt thành 100%.
Trong ví dụ này, đánh dấu của tài liệu web được chỉ định bằng cách sử dụng các thẻ HTML 5 tương đối mới, có thể không được các trình duyệt cũ hiểu chính xác. Vì điều này, toàn bộ thiết kế trang có thể không được hiển thị chính xác. Để tránh điều này, bạn cần thay thế các thẻ mới từ kho phiên bản 5 của ngôn ngữ siêu văn bản bằng các thẻ thông thường
Phiên bản cải tiến
Phương pháp được thảo luận ở trên về cách làm cho phần chân trang ở cuối trang trở nên “không thể lay chuyển” không phù hợp với tất cả mọi người. Nếu bạn định sửa đổi và cải thiện thiết kế trang web của mình bằng cách sử dụng cửa sổ bật lên trong tương lai thì tốt hơn hết bạn nên ngừng sử dụng cách triển khai trước đó.
Thuộc tính CSS được sử dụng phổ biến nhất cho cửa sổ bật lên là z-index . Sử dụng các giá trị của nó, bạn chỉ định thứ tự các lớp được xếp chồng lên nhau.
Giá trị chỉ số z của một phần tử càng cao thì nó sẽ xuất hiện càng cao trong ngăn xếp “phân lớp” tổng thể.
Nhưng vì chúng ta đã sử dụng giá trị đệm âm cho phần chân trang trong ví dụ trước nên phần dưới cùng của cửa sổ bật lên sẽ chồng lên khu vực phần chân trang trên cùng. Mặc dù nó sẽ có giá trị chỉ số z cao hơn. Bởi vì cha mẹ (trình bao bọc) của cửa sổ bật lên vẫn có giá trị thấp hơn cho thuộc tính này.
Đây là một tùy chọn nâng cao hơn:
CSS - mã ví dụ:
html, nội dung ( chiều cao: 100%; ) .header ( chiều cao: 120px; màu nền: rgb(0,255,102); ) .main ( chiều cao tối thiểu: 100%; vị trí: tương đối; màu nền: rgb(100,255,255); ) .footer ( chiều cao:150px; vị trí: tuyệt đối; bên trái: 0; dưới cùng: 0; chiều rộng: 100%; màu nền: rgb(0,0,153); )
Như bạn có thể thấy từ đoạn mã, chúng tôi đã đặt chân trang như một phần của thành phần chính. Chúng tôi đặt vị trí tương đối cho vùng chứa và định vị tuyệt đối cho chân trang. Chúng tôi cố định tầng hầm ở dưới cùng của container, đặt vị trí của nó ở bên trái và trên cùng thành 0.
Tùy chọn cho tầng hầm có chiều cao không cố định
Việc triển khai trước đó có thể đảm bảo rằng chân trang luôn ở cuối trang. Nhưng chỉ khi chân trang có chiều rộng cố định. Nhưng nếu không thể đoán trước được lượng nội dung được đăng trong đó thì sao?
Chào mọi người!
Trang web trông đẹp mắt về mặt thẩm mỹ nếu tất cả các yếu tố của nó được đặt đúng chỗ. Tuy nhiên, thường có những trường hợp mọi thứ dường như bình thường, nhưng vẫn có gì đó không ổn... Ví dụ: nếu trang ngắn, phần chân trang không được nhấn xuống cuối trang mà được đặt ở vị trí cần thiết - sau khối chính của trang web. Nó trông không đẹp lắm.
Vì vậy, hôm nay chúng tôi sẽ hướng dẫn các bạn cách nhấn chân trang của trang web vào viền dưới cùng của cửa sổ trình duyệt.
Vì vậy, chúng ta sẽ đặt ra những yêu cầu sau cho tầng hầm:
- chân trang được nhấn xuống cuối màn hình khi chiều cao của cửa sổ trình duyệt lớn hơn chiều cao của trang, bất kể nội dung;
- chân trang ở đúng vị trí khi khối lượng nội dung lớn hơn chiều cao của cửa sổ trình duyệt;
- hoạt động trong tất cả các trình duyệt phổ biến;
- độ tin cậy - không phụ thuộc vào độ phức tạp của bố cục.
Ví dụ: hãy lấy một trang đơn giản bao gồm hai khối chính: phần chính và phần chân trang. Hãy đảm bảo rằng khối chính chiếm toàn bộ khu vực của cửa sổ trình duyệt, bất kể lượng nội dung, đồng thời nhấn chân trang xuống cuối màn hình để thanh cuộn dọc không xuất hiện trong trình duyệt. Chúng tôi làm điều đó như thế nào:
Bước 1
Chúng ta làm 2 block: main (chính) và tầng hầm (footer). Chúng tôi kéo dài vùng chứa chính đến toàn bộ chiều cao của màn hình trình duyệt (chiều cao tối thiểu) và chỉ định nghiêm ngặt chiều cao của chân trang (chiều cao).
Trong trường hợp này, tổng chiều cao của trang web sẽ là chiều cao của màn hình + chiều cao của chân trang.
Bước 2
Chúng tôi sử dụng lề âm (margin-top) để “nhập” khối chính sao cho chiều cao của trang web chỉ bằng 100% chiều cao màn hình.
Với cách sắp xếp các khối này và với đủ lượng nội dung (ví dụ: văn bản) trong khối chính, có thể chồng nội dung trong khối chính lên chân trang:
Bước 3
Để tránh vấn đề tiềm ẩn này, hãy thêm một khối trống ở cuối khối chính, chiều cao của khối này không nhỏ hơn chiều cao của chân trang (hoặc tốt hơn là nhiều hơn một chút để có khoảng trống giữa nội dung và phần chân trang). chân trang):
Bây giờ, nếu có nhiều nội dung, nó sẽ di chuyển khối trống xuống. Và điều này sẽ hạ thấp chân trang, ngăn không cho nội dung phù hợp với nó.
Hãy xem nó trông như thế nào trong mã:
| <html > <đầu > <tiêu đề > Chân trang được ép xuống phía dưới</tiêu đề> <kiểu kiểu = "văn bản/css" >* (lề: 0; phần đệm: 0;) /* đặt lại phần đệm */ body ( nền: #fff;) html,body ( chiều cao: 100%; /* đặt chiều cao của phần thân tài liệu */).main ( / * khối chính , phải kéo dài đến chân trang */ nền: #999; /* màu nền của khối chính (để rõ ràng) */ min-height: 100%; /* đặt chiều cao tối thiểu của khối chính */ ) * html .main ( /* hack for ie6 */ Height: 100%; /* for ie6, vì nó không hiểu min-height */).hFooter ( /* đây là phần đệm trong khối chính - chúng tôi bảo lưu không gian cho tầng hầm */ chiều cao: 40px; /* chiều cao chân trang của chúng tôi */).footer ( /* footer */ nền: #0000CC; /* màu nền chân trang (để rõ ràng) */ color: #fff; chiều cao: 40px ; /* chiều cao chân trang */ lề trên: -40px ; /* thụt lề âm về chiều cao bằng với chiều cao của chân trang để vừa khít với kích thước màn hình */)</kiểu> </đầu> <cơ thể > <lớp div = "chính" >Đây là khối chính<lớp div = "hFooter" > </div> <lớp div = "chân trang" >Đây là tầng hầm</div> </cơ thể> </html> |
Lưu ý: khi sử dụng block block và các khối (cột) chính nổi cho .hFooter, bạn nên thêm clear:cả hai để footer nằm dưới các cột.:
| .hFooter ( clear : cả hai ; chiều cao : 40px ; ) |
Nếu bạn đã thành thạo một chút, thì câu hỏi có thể đặt ra: "Tại sao lại sử dụng một phần tử bổ sung khi bạn có thể sử dụng phần đệm dưới cùng?"
Câu trả lời là bạn không thể chỉ sử dụng nó ở đây, vì kích thước của khối bằng kích thước của nó + chiều rộng của phần đệm bên trong + chiều rộng của đường viền. Sự kết hợp giữa chiều cao tối thiểu: 100% và phần đệm dưới cùng sẽ mang lại chiều cao trang web lớn hơn chiều cao màn hình. Kết quả là ngay cả khi không có nội dung nào, phần chân trang sẽ ở ngoài màn hình.
Nhược điểm của kỹ thuật này là sử dụng thêm phần tử hFooter trống. Trong điều kiện thực tế (khi nội dung của trang web không trống và bố cục khối được sử dụng), điều này có thể tránh được bằng cách sử dụng kỹ thuật này để giúp làm rõ luồng mà không cần sử dụng phần tử bổ sung và để ngăn nội dung can thiệp vào chân trang, chúng ta sẽ viết phần đệm-đáy vào các cột.
Sự cố với lớp z
Trong kỹ thuật được mô tả ở trên, phần chân trang được nâng lên với mức thụt âm hướng lên trên. Điều này đặt ra một vấn đề tiềm ẩn với lớp z. Ví dụ: chúng ta cần hiển thị một cửa sổ bật lên (hãy đặt nó là div), cửa sổ này sẽ được định vị tương ứng với vùng chứa chính.
| <lớp div = "chính" > [...] <lớp div = "cửa sổ bật lên" > [...] </div> </div> <lớp div = "chân trang" > [...] </div> |
| .main (vị trí: tương đối; z-index: 1; /* z-index nhỏ hơn footer để có thể nhìn thấy được */) .popup ( vị trí : tuyệt đối ; z-index : 100 ; [ ...] ) .footer ( chiều cao : 50px ; lề trên : -50px ; vị trí : tương đối ; /* để bạn có thể đặt chỉ mục z */ chỉ số z: 2; /* nhiều hơn main sẽ được hiển thị */} |
Mọi thứ đều ổn cho đến khi cửa sổ bật lên và chân trang của chúng tôi giao nhau (và tình huống này xảy ra khá thường xuyên) - đây là lúc vấn đề bắt đầu. Mặc dù thực tế là cửa sổ bật lên có chỉ số z cao nhất nhưng nó sẽ bị chân trang chồng lên nhau, bởi vì cửa sổ bật lên gốc có chỉ mục z thấp hơn chân trang:
Trong trường hợp này, bạn cần tìm cơ hội để định vị cửa sổ không liên quan đến chính mà liên quan đến một số phần tử con khác nằm bên trong chính. Vì vậy, chúng ta sẽ loại bỏ việc chỉ định z-index cho phần chính và phần chân trang. Nhưng tùy chọn này không phải lúc nào cũng có thể thực hiện được, vì vậy hãy xem xét tùy chọn thứ hai là nhấn chân trang.
Giải pháp 2 - định vị tuyệt đối
Ý tưởng tương tự như giải pháp 1:
- Chúng tôi kéo dài khối chính lên toàn bộ chiều cao của màn hình;
- Chúng tôi dành chỗ cho tầng hầm;
- So với khối chính, chúng tôi định vị tầng hầm ở dưới cùng bằng cách sử dụng định vị tuyệt đối.
HTML: liên quan đến ; /* để các phần tử con được định vị tương ứng với khối này */) .footer ( chiều cao : 50px ; vị trí : tuyệt đối ; trái : 0 ; đáy : 0 ; chiều rộng : 100% ; ) * html .footer ( đáy : biểu thức(parentNode.offsetHeight % 2 ? style.bottom= "-1px" : style.bottom= "0px" ); /* hack cho e6, có jamb với offset là 1px */}
Cách tiếp cận này sẽ giải quyết vấn đề với các cửa sổ bật lên, bởi vì... cả chân trang và cửa sổ bật lên sẽ có cha mẹ chung, điều đó có nghĩa là sẽ không có bất ngờ nào với các lớp z.
Nhược điểm của cả hai phương pháp là cả hai phương pháp đều chỉ phù hợp với tầng hầm có chiều cao cố định.
Đó là tất cả cho ngày hôm nay. Bây giờ bạn đã biết cách nhấn chân trang xuống cuối màn hình theo nhiều cách khác nhau và những vấn đề có thể phát sinh.
Đăng ký để cập nhật và mong chờ những ấn phẩm mới thú vị. Tạm biệt.
Tôi nhớ rằng tại thời điểm tôi bắt đầu chuyển từ bố cục bảng sang bố cục div, một trong những khó khăn mà tôi gặp phải là - cách đẩy chân trang của trang xuống cuối cửa sổ trình duyệt, để trang có vẻ được kéo dài hết cỡ, bất kể khối lượng văn bản và nếu chiều cao của trang lớn hơn chiều cao của cửa sổ trình duyệt (khi cuộn xuất hiện), chân trang sẽ vẫn ở đúng vị trí.
Nếu với sự trợ giúp của bảng, vấn đề này chỉ được giải quyết bằng cách chỉ định chiều cao cho bảng và/hoặc ô được lồng trong đó, thì khi sử dụng CSS trong bố cục khối, một cách tiếp cận hoàn toàn khác sẽ được sử dụng.
Trong quá trình thực tập tôi đã xác định cho mình 5 cách ép chân trang xuống cuối cửa sổ trình duyệt bằng CSS.
Mã HTML của tất cả các phương thức được trình bày có cấu trúc sau (sự khác biệt duy nhất là mã CSS):
Mã CSS bên dưới chỉ bao gồm những thuộc tính cần thiết tối thiểu để triển khai phương thức tương ứng. Đối với mỗi người trong số họ, bạn có thể xem một ví dụ trực tiếp.
Cách đầu tiên
Footer được nhấn xuống bằng cách định vị nó một cách tuyệt đối và kéo dài chiều cao của các khối cha (html, body và .wrapper) lên 100%. Trong trường hợp này, content block.content cần chỉ định lề dưới bằng hoặc lớn hơn chiều cao của chân trang, nếu không chân trang sẽ che đi một phần nội dung.
* ( lề: 0; đệm: 0; ) html, nội dung ( chiều cao: 100%; ) .wrapper ( vị trí: tương đối; chiều cao tối thiểu: 100%; ) .content ( đệm dưới cùng: 90px; ) .footer ( vị trí : tuyệt đối; trái: 0; dưới cùng: 0; chiều rộng: 100%; chiều cao: 80px; )
Cách thứ hai
Chân trang được nhấn xuống bằng cách kéo khối nội dung và “mẹ” của nó lên hết chiều cao của cửa sổ trình duyệt và nâng chân trang lên qua lề âm (lề trên) để loại bỏ cuộn dọc xuất hiện. Trong trường hợp này, cần chỉ ra chiều cao của tầng hầm và phải bằng lượng vết lõm.
* ( lề: 0; đệm: 0; ) html, nội dung, .wrapper ( chiều cao: 100%; ) .content ( box-sizing: border-box; min-height: 100%; đệm-bottom: 90px; ) . chân trang ( chiều cao: 80px; lề trên: -80px; )
Nhờ thuộc tính box-sizing: border-box, chúng tôi ngăn hộp có lớp .content vượt quá 100% chiều cao. Nghĩa là, trong trường hợp này min-height: 100% + buffer-bottom: 90px bằng 100% chiều cao cửa sổ trình duyệt.
Cách thứ ba
Điều này tốt vì, không giống như các phương pháp khác (ngoại trừ phương pháp thứ 5), chiều cao của chân trang không quan trọng.
* ( lề: 0; đệm: 0; ) html, nội dung ( chiều cao: 100%; ) .wrapper ( hiển thị: bảng; chiều cao: 100%; ) .content ( hiển thị: hàng-bảng; chiều cao: 100%; )
Ở đây, chúng tôi mô phỏng hành vi của một bảng bằng cách biến khối .wrapper thành một bảng và khối .content thành một hàng trong bảng (các thuộc tính display: table và display: table-row tương ứng). Nhờ vào điều này, và thực tế là khối .content và tất cả các vùng chứa chính của nó được đặt ở chiều cao 100%, nội dung được kéo dài đến hết chiều cao, trừ đi chiều cao chân trang, được xác định tự động - mô phỏng bảng ngăn không cho chân trang mở rộng vượt quá chiều cao của cửa sổ trình duyệt.
Kết quả là footer bị ép xuống phía dưới.
Phương pháp thứ tư
Phương pháp này không giống bất kỳ phương pháp nào trước đó và điểm đặc biệt của nó là sử dụng hàm CSS calc() và đơn vị đo vh, chỉ được hỗ trợ bởi các trình duyệt hiện đại. Ở đây bạn cần biết chính xác chiều cao của tầng hầm.
* ( lề: 0; phần đệm: 0; ) .content ( chiều cao tối thiểu: calc(100vh - 80px); )
100vh là chiều cao của cửa sổ trình duyệt và 80px là chiều cao của chân trang. Và bằng cách sử dụng hàm calc(), chúng ta trừ giá trị thứ hai khỏi giá trị đầu tiên, từ đó nhấn chân trang xuống dưới cùng.
Làm sao đẩy chân trang xuống cuối trang? Câu hỏi này được nhiều người đã từng gặp phải về bố cục của website đặt ra. Thực tế là nếu chiều cao của các khối trong các bố cục này không được chỉ định rõ ràng thì nó phụ thuộc vào lượng nội dung của chúng; theo đó, nếu nội dung này đủ nhỏ thì toàn bộ bố cục có thể chiếm chiều cao nhỏ hơn cửa sổ trình duyệt . Đương nhiên, tất cả điều này trông không đẹp lắm. Bây giờ tôi sẽ chỉ cho bạn một số cách để đẩy chân trang xuống cuối trang và nhờ đó làm cho bố cục trở nên hấp dẫn và quen thuộc hơn.
Trong mỗi ví dụ chúng ta sẽ bắt đầu từ thực tế là bố trí trang web có cấu trúc thông thường này (bố cục của bạn có thể khác nhau, nhưng các phương thức đều phổ biến):
Tiếp theo, các khối bổ sung, thuộc tính CSS, v.v. sẽ được thêm vào bố cục để đạt được kết quả mong muốn. Tuy nhiên, trong bố cục mà bạn quyết định đẩy chân trang xuống cuối trang, các khối này hoặc một số thuộc tính có thể đã có sẵn nên không cần phải thêm lại chúng. Tất cả các thuộc tính CSS liên quan trực tiếp đến việc cố định phần chân trang xuống phía dưới đều được cung cấp các nhận xét.
Nhấn chân trang xuống phía dưới bằng cách sử dụng định vị
Mô tả ví dụ
- Tất cả các khối bố cục được gói trong một khối bao bọc bổ sung id="wrapper" có chiều cao tối thiểu (thuộc tính CSS) là 100% để nó có thể kéo dài hết chiều cao của cửa sổ trình duyệt nhưng có thể kéo dài hơn nữa nếu cần. Tuy nhiên, vì giá trị phần trăm được tính toán tương đối so với giá trị trước nên để điều này hoạt động, chúng tôi phải chỉ định rõ ràng chiều cao (CSS) cho thẻ và.
- Bước tiếp theo là định vị tuyệt đối (CSS) phần chân trang so với khối trình bao bọc ở phía dưới cùng (CSS). Như vậy, footer của chúng ta đã được ép xuống cuối trang.
- Vì định vị tuyệt đối sẽ đưa phần tử ra khỏi luồng nên khi thêm thông tin vào các khối có nội dung và menu, một phần thông tin sẽ nằm ở phần chân trang được nhấn. Để ngăn điều này xảy ra, các phần tử id="content" và id="menu" đã được đặt thành phần đệm dưới cùng (CSS) bằng chiều cao của chân trang. Bây giờ họ sẽ là người đi xuống phần chân trang và đẩy nó xuống.
- Vì trong bố cục của chúng tôi, khối có menu nổi (CSS), nên phần chân trang sẽ vẫn không nhận thấy nó và theo đó, menu sẽ không đẩy nó xuống. Để khắc phục điều này, một khối khác (class="clear") đã được tạo để phá vỡ gói (thuộc tính CSS). Nhân tiện, nếu bạn không có kế hoạch hỗ trợ IE6 và IE7, thì thay vì khối này, bạn có thể áp dụng phần tử giả cho khối cuối cùng trước phần chân trang (ở đây là “nội dung”) và chỉ cần làm gián đoạn luồng của nó.
Trong đoạn đầu tiên, thuộc tính CSS được sử dụng để biểu thị chiều cao tối thiểu, điều này Internet Explorer 6 không hiểu được, nhưng nó hiểu thuộc tính này giống như chiều cao tối thiểu. Ngoài ra, trình duyệt này bỏ qua quy tắc trong một số trường hợp nhất định. Hai tính năng này đã được sử dụng trong ví dụ này để tạo hakađể khiến nó thực hiện những việc cần làm mà không ảnh hưởng đến các trình duyệt khác.
Nhấn chân trang xuống phía dưới bằng cách sử dụng các khối bổ sung
Mô tả ví dụ
- Tất cả các khối bố cục ngoại trừ phần chân trang đều được gói trong một khối id="wrapper" bổ sung, được đặt ở chiều cao tối thiểu (CSS) là 100%. Điều này được thực hiện sao cho trình bao bọc khối ít nhất sẽ kéo dài hết chiều cao của cửa sổ trình duyệt, nhưng nếu cần (nếu có nhiều nội dung), nó có thể kéo dài hơn nữa. Bây giờ chiều cao của trình bao bọc của chúng tôi bằng chiều cao của cửa sổ trình duyệt và chiều cao của toàn bộ trang HTML = chiều cao của trình bao bọc + chiều cao chân trang.
- Kết quả của hành động ở điểm đầu tiên, mặc dù chân trang của chúng tôi được nhấn xuống cuối trang nhưng nó vẫn vượt ra ngoài đường viền dưới cùng của cửa sổ trình duyệt, điều này không tốt. Để nâng cao khả năng hiển thị của nó, một lề âm trên cùng (CSS) đã được đặt cho nó, kích thước của nó bằng với chiều cao của chính chân trang. Thế là xong, phần footer được nhấn và nằm ở cuối trang.
- Vì trong đoạn trước chúng ta đã chỉ định lề âm phía trên cho phần chân trang được nhấn, nên khi thêm thông tin vào các khối có nội dung hoặc menu, một phần của nó sẽ nằm ở phần chân trang này. Để tránh điều này, một khối khác đã được tạo bằng id="footer_core" , chiều cao của khối này bằng (bạn có thể làm cho nó lớn hơn một chút) với chiều cao của chân trang. Như vậy, chính khối sửa lỗi này sẽ đi xuống phần chân trang được nhấn và đẩy nó xuống, giúp thông tin không bị ẩn đi.
- Một ngắt ngắt dòng (CSS) đã được thêm vào khối điều chỉnh để ngăn nó quấn quanh menu nếu nó vượt quá chiều cao của nội dung. Theo đó, sự gián đoạn dòng chảy này đã bị loại bỏ khỏi phần chân trang vì không cần thiết.
Như trong ví dụ đầu tiên, đối với IE6, một bản hack đặc biệt đã được sử dụng ở đây cho phép bạn đặt chiều cao tối thiểu của nó.
