Thứ bảy, ngày 25 tháng 11 năm 2017

Cố định Header và Footer trên các trình duyệt

Ngày đăng: 12/4/2011, 23:8:18AM | Lượt xem: 2,785
Hot!

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:

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>

Bâ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:

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.}

Tuy 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 heightwidth cho nó.

1./* for internet explorer */
2. * html body { padding:120px 0 50px 0; }

Bước 2: Định vị phần Header của trang:

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;
10.  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:

01./* Content */
02.#content {
03.  position: fixed;
04.  top: 120px;
05.  left: 0;
06.  bottom: 50px;
07.  margin: 0 auto;
08.  padding: 20px;
09.  text-align: left;
10.  overflow: auto;
11.}

hack cho IE

1.* html #content {
2. height:100%;
3. width:100%;
4. }

Bước 4: Định vị phần footer của trang:

01./* Footer */
02.#footer {
03.  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:

http://www.cssyeah.com/
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.