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


จากที่เคยเขียน ให้ฟุตเตอร์อยู่ด้านล่างพอดีหน้าจอ
ถ้าหน้าเว็บสั้นกว่าจอโดยใช้ tableless เรามาย้อนยุคโดยใช้ตารางดูบ้าง
note

  • ใช้ได้กับทุกบราวเซอร์รวมทั้งไอโฟนด้วย แต่ ie ต้องใช้ DOCTYPE เท่านั้น ถ้าเป็นตัวอื่นจะกำหนดความสูงของแถวไม่ได้
  • ถ้าเนื้อหาน้อยมากๆ ตารางจะพยามชดเชยความสูงของตัวมันเองที่มากกว่าปกติ โดยจะเพิ่มความสูงของ tr ทดแทน ถ้าไม่อยากให้หน้าเว็บดูผิดปกติให้แก้ <tr> ที่มีปัญหาเป็น<tr style=”height:20px;”>
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>100% table height</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css3.css">
    <style>
    html
    {
    	height:100%;
    }
    body
    {
    	height:100%;
    	margin: 0px;
    	padding: 0px;
    	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
    }
    table
    {
    	border: 0 none;
    	height:100%;
    }
    td
    {
    	margin: 0px;
    	padding: 0px;
    	vertical-align:top;
    	height:0px;
    }
    #header
    {
    	background:#c00000;
    	height:20px;
    }
    #footer
    {
    	background:#c00000;
    	height:20px;
    }
    </style>
    </head>
    <body>
    <table border="1" class="tablewrapper">
      <tr>
        <td id="header">header</td>
      </tr>
      <tr>
        <td>contents</td>
      </tr>
      <tr>
        <td id="footer">footer</td>
      </tr>
    </table>
    </body>
    </html>
    

    นี่ถ้าเขียนโดยใช้ div จะง่ายและสั้นกว่ามาก
    ดูเพิ่มเติม

About plusmagic

PHP lover in thailand

Posted on 2011/10/07, in CSS, HTML, programming and tagged , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink. ใส่ความเห็น.

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: