Category Archive CSS

Byphunsanit

ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ

ปกติฟุตเตอร์ในหน้าเว็บจะอยู่ต่อจากส่วนอื่นๆ ถ้าเนื้อหาสั้นก้จะเห็นหน้าเว็บ สั้นแปลกๆ อย่างหน้าแจ้งสมัครสมาชิคสำเร็จถ้ามีข้อความแค่ สำเร็จแล้ว จะส่งเมล์ไปยืนยัน ถ้าเว็บไม่มีโฆษณา หรือภาพใหญ่ๆ ก็จะเห็นแค่ครึ่งหน้าจอ บางคนบอกว่าตลก แก้ได้โดยวางโครงสร้างตามตัวอย่างครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CSS Fixed Footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html,
body
{
    margin:0;
    padding:0;
    height:100%;
}
#container
{
    min-height:100%;
    position:relative;
}
#footer
{
    position:absolute;
    bottom:0;
    width:100%;
    height:20px;/* Height of the footer */
    background:#c00000;
    padding-top:5px;
}
#body
{
    display:block;
    background:#CF6;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body">
 ใส่เนื้อหาสั้นๆ ตรงนี้นะ
</div>
<hr />
<div id="footer">ฟุตเตอร์นะนายจ๋า</div>
</body>
</html>

ถ้าเนื้อหายาว ก็จะเห็นเหมือนเว็บปกติครับ