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>