Cố định Header và Footer trên các trình duyệt Hôm nay lang thang trên mạng và tình cờ tìm hiểu được một kỹ thuật rất hay và có tính ứng dụng cao trong việc làm layout cho Website.. Nội d
Trang 1Cố định Header và Footer trên các trình duyệt
Hôm nay lang thang trên mạng và tình cờ tìm hiểu được một kỹ thuật rất hay
và có tính ứng dụng cao trong việc làm layout cho Website Nội dung chính của kỹ thuật đó là chúng ta sẽ giữ cho phần Header và phần Footer cố định, còn phần nội dung ở giữa sẽ xuất hiện thanh Scroll trong trường hợp nó dài quá
độ dài màn hình
Để làm được như vậy trước kia chúng ta thường sử dụng 3 iFrame, một iFrame cho phần Header, một iFrame cho phần Footer và 1 iFrame cho phần Content Tuy nhiên trong bài viết này chúng ta sẽ không sử dụng iFrame mà chúng ta sẽ
sử dụng các thẻ div như thông thường và định vị chúng bằng CSS
Đầu tiên giả sử chúng ta sẽ tạo ra một file HTML có định dạng như sau:
Trang 2view source
print?
01.<html>
02.<head> </head>
03.<body>
04
05
06 <h1>Header</h1>
07
08
09
10 <! Phần nội dung >
11
12
13
14 Footer
15
16
17 </body>
18.</html>
Trang 3Bây giờ chúng ta sẽ dùng CSS để định vị các thẻ DIV để đạt được yêu cầu của chúng ta:
Bước 1: Định dạng chung cho toàn trang:
view source
print?
01.body {
02 background: #fff;
03 color: #222;
04 font-family: Arial, Tahoma, Verdana, sans-serif;
05 font-size: 12px;
06 height: 100%;
07 line-height: 1.6;
08 margin: 0;
09 padding: 0;
10 text-align: center;
11 overflow: hidden;
12.}
Trang 4Tuy nhiên phần định dạng trên chỉ dành cho các trình duyệt như Firefox, Opera, Safari, Chrome Còn đối với IE chúng ta cần hack thêm thuộc tính height và width cho nó
view source
print?
1./* for internet explorer */
2 * html body { padding:120px 0 50px 0; }
Bước 2: Định vị phần Header của trang:
view source
print?
01./* Header */
02.#header {
03 background: #222;
04 border-bottom: 5px solid #333;
05 color: #fff;
06 height: 120px;
07 line-height: 120px;
08 text-align: center;
09 position: absolute;
Trang 510 padding: 0;
11 top: 0;
12 left: 0;
13 width: 100%;
14.}
15
16.#header h1 {
17 font-size: 200%;
18 margin: 0;
19 text-transform: uppercase;
20.}
Bước 3: Định vị phần nội dung của trang:
view source
print?
01./* Content */
02.#content {
03 position: fixed;
04 top: 120px;
05 left: 0;
Trang 606 bottom: 50px;
07 margin: 0 auto;
08 padding: 20px;
09 text-align: left;
10 overflow: auto;
11.}
hack cho IE
view source
print?
1.* html #content {
2 height:100%;
3 width:100%;
4 }
Bước 4: Định vị phần footer của trang:
view source
print?
01./* Footer */
02.#footer {
Trang 703 background: #222;
04 border-top: 5px solid #333;
05 color: #ccc;
06 font-weight: bold;
07 height: 50px;
08 line-height: 50px;
09 position: absolute;
10 bottom: 0;
11 left: 0;
12 width: 100%;
13 text-align: center;
14.}
Để dễ dàng hình dung các bạn có thể xem demo của kỹ thuật trên: