โครงสร้าง css ความสูง 100%

สำหรับบทความนี้เคยเขียนไว้ตอนปี 2008 แล้ว  ในเมื่อเรากลับมาใช้ในเวอร์ชั่นแรกคือปี 2008 ก็น่าจะเอาบทความนี้มาด้วย  มันเป็นโครงสร้าง css ที่ผมใช้ตัดเว็บเป็นประจำตั้งแต่ทำงานครั้งแรก ลองดูกันนะครับ

โค๊ด CSS 

html,body {
    margin:0;
    padding:0;
    height:100%; /* ใช้ร่วมกับ wrapper */
    background:gray;    
    font-family:Tahoma;
    font:normal 12px/130% Tahoma,Arial, Helvetica, sans-serif;  
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0;
    padding:10px;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0;
    padding:5px 0 5px 10px;
}

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

#warpper {
    position:relative; /* กำหนดเพื่อ footer*/
    margin:0 auto; /* กำหนดให้อยู่ตรงกลาง ไม่สามารถใช้ได้ใน ie5 */
    width:750px;
    background:#f0f0f0;    
    height:auto !important;
    height:100%; /* IE6*/
    min-height:100%; 
}

#header {
    padding:1em;
    background:#ddd;
    border-bottom:6px double gray;
    height: 50px;
}
    div#header p {
        margin:0;
    }

#content {
     padding-bottom:20px;  /* กำหนดให้เท่ากับความสูงของ footer */
}
    div#content p {
        padding:0 1em;
    }

#footer {
    position:absolute;
    width:100%;
    height: 20px;
    bottom:0; /* ให้ติดพื้น */
    background:#F00;
    border-top:6px double gray;
}
    #footer p {
        text-align:center;
        color:#FFFFFF;
        padding:0;
        margin:0;
    }

 โค๊ด HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS layout: 100% height with header and footer</title>

<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="warpper">
    
        <div id="header">
            <h1>CSS layout: 100% height with header and footer</h1> 
        </div>

        <div id="content">
            <h2>Min-height</h2>
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In viverra  massa. Aliquam consectetuer tortor ac est. Aenean ac quam. Pellentesque  habitant morbi tristique senectus et netus et malesuada fames ac turpis  egestas. Donec metus mi, pharetra ut, tincidunt pulvinar, scelerisque  id, ipsum. In hac habitasse platea dictumst. Morbi nibh lacus, laoreet  vitae, porta ac, dictum ullamcorper, lacus. Cras lorem justo, varius  sed, placerat ut, dapibus id, risus. Suspendisse non nisl a diam mollis  rhoncus. Duis in justo nec sem volutpat cursus. Pellentesque egestas  aliquam ipsum. Pellentesque vitae dolor sed eros cursus tempor. Class  aptent taciti sociosqu ad litora torquent per conubia nostra, per  inceptos himenaeos. </p>
            <p>Maecenas neque tellus, placerat vitae, pharetra vitae, tincidunt id,  velit. Nullam nec lectus sed dui lacinia bibendum. Nunc quis velit.  Quisque aliquam mauris ut turpis. In ut nisi. Sed pharetra. Donec nec  magna. Sed ultrices mi quis dolor. Pellentesque elit sapien, vulputate  id, ornare at, lobortis nec, lacus. Pellentesque fermentum. </p>
      </div>

        <div id="footer">
            <p>This is footer</p>
        </div>
    </div>
</body>
</html>

  

อธิบายคร่าว ๆ นะครับ

  • html , body  จะเป็นการกำหนดรูปแบบของเว็บ เช่น Font
  • warpper  เป็นการกำหนดโครงสร้างภายในเว็บ และโครงสร้าง CSS จะเป็นไปตามโค๊ด  และภายใน Warpper จะประกอบด้วย  Header, Content และ Footer  ซึ่งจะกำหนด Position  เป็น Relative  เพราะว่า  จำเป็นโครงสร้างแม่ของ Footer อีกด้วย
  • Header กับ content  ก็สามารถกำหนดรูปแบบได้ตามต้องการ  ในส่วนของ Content ส่วน padding-button  ให้มีความสูงเท่ากับ Footer ด้วยนะครับ
  • Footer  จะใช้ Position เป็น Absolute และกำหนด bottom เป็น 0 เพื่อให้ติดพื้นตลอด

ลองทำดูไม่ยากครับ  นำไปประยุกต์ได้อีกหลายเว็บเลย

ปล. บทความนี้เคยเขียนครั้งแรกตอน 2008-10-11 11:16:11  เกือบสามปีแหนะ

วันที่ 11 ก.ค. 54 เวลา 10:13:38 น.