Cấp bậc tác giả:

HTML

Cố định header và footer

Được viết bởi QuangIT ngày 21/11/2012 lúc 02:46 PM
Với đoạn CSS dưới đây các bạn sẽ cố định được phần header va footer của trang web, phần nội dung sẽ có thanh trượt dọc trong trường hợp nó dài quá độ dài màn hình. CSS
  • 0
  • 3359

Cố định header và footer


Với đoạn CSS dưới đây các bạn sẽ cố định được phần header va footer của trang web, phần nội dung sẽ có thanh trượt dọc trong trường hợp nó dài quá độ dài màn hình.
CSS
<style type="text/css">
 #header {
    background: #222;
    border-bottom: 5px solid #333;
    color: #fff;
    height: 120px;
    line-height: 120px;
    text-align: center;
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
  }
  #content {
    position: fixed;
    top: 120px;
    left: 0;
    bottom: 50px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
    overflow: auto;
  }
  #footer {
    background: #222;
    border-top: 5px solid #333;
    color: #ccc;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
  }
</style>
HTML
<div id="header">header</div>
<div id="content">your text here</div>
<div id="footer">footer</div>
 

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML