Cấp bậc tác giả:
HTML
Cố định header và footer
Được viết bởi QuangIT vào 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
- 11725
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
#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;
}
HTML
header
your text here
footer
Nguồn bài viết: Dngaz.com
- Bài trướcCSS cho các thẻ theo trạng thái [link, hover, visited, active, focus]
- Bài sauChiều rộng thẻ DIV tự co giản theo nội dung
Bài viết tương tự
- THEMEFEST WOWWAY INTERACTIVE & RESPONSIVE HTML PTFOLIO
- CSS cho các thẻ theo trạng thái [link, hover, visited, active, focus]
- Đếm số ký tự trong textbox bằng jquery
- Srabon - html template đẹp cho trang admin
- Hướng dẫn làm trang tin tức nổi bật giống DNGAZ với Jquery
- jQuery -Code gGame bắn chim
- HTML5 Desktop Notification Tutorial
- A Tabbed Slider Using jQuery
- Rounded Tab Menu Using jQuery and CSS
- Giới thiệu node.js và CoffeeScript
BÌNH LUẬN BÀI VIẾT