ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์ProgrammingCSS ต้องการให้ footer อยู่ล่างสุดตลอด ทำยังไำงค่ะ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: CSS ต้องการให้ footer อยู่ล่างสุดตลอด ทำยังไำงค่ะ  (อ่าน 12481 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
Nato_One
Newbie
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 72



ดูรายละเอียด
« เมื่อ: 02 กันยายน 2011, 13:31:54 »

โค๊ด:
#footer {
clear: both;
width: 100%;
margin: 0 auto;
padding: 20px 0;
padding: 15px 35px;
text-align: center;
color: #ffffff;
font-weight:bold;
background: url(../images/background.gif) repeat-x;
}

อยากให้  footer อยู่ล่างสุดตลอด  แม้ว่าข้อมูลส่วน body จะมีน้อยก็ตามค่ะ  ขอคำแนะนำหน่อยค่ะ
บันทึกการเข้า
kritdaddyrock
Newbie
*

พลังน้ำใจ: 7
ออฟไลน์ ออฟไลน์

กระทู้: 42



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 02 กันยายน 2011, 13:41:28 »

ทดลองใส่ค่า min-height ให้กับข้อมูลส่วนบนดูสิครับ
ยกตัวอย่างเช่น ข้อมูลส่วนบนชื่อ ไอดี content

#content{ min-height:550px}
หากเนื้อหา ในไอดี content มีน้อยก็จะสูงอย่างน้อย 550px
แต่หากข้อมูลนั้นมีมาก ก็จะสูงตาม จำนวนข้อมูลไปโดยปริยาย
 wanwan013
บันทึกการเข้า

กีต้าร์และอุปกรณ์ดนตรี:  http://www.online-guitarshop.com
จำหน่ายโคมไฟ:  http://www.flower-light.com
จำหน่ายโคมไฟ:  http://www.kunalight.com
จำหน่ายของชำร่วยงานแต่ง: http://www.klonggift.com
ZeCrof
สมุนแก๊งเสียว
*

พลังน้ำใจ: 39
ออฟไลน์ ออฟไลน์

กระทู้: 888



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 02 กันยายน 2011, 14:01:34 »

#footer {
       position:absolute;
       bottom:0;
       left:0;
   width: 1000px;
        height:50px;

   padding: 20px 0;
   padding: 15px 35px;
   text-align: center;
   color: #ffffff;
   font-weight:bold;
   background: url(../images/background.gif) repeat-x;
}


ลองเอาไปปรับใช้ดูนะครับ ต้องอยู่ในกรอบ div warper ที่ความสูง 100% ด้วยนะครับ

บันทึกการเข้า

ฮอนด้า เชียงใหม่ รถยนต์ฮอนด้า จังหวัดเชียงใหม่
ที่ดินเชียงใหม่ ฝากขายที่ดิน บ้าน เชียงใหม่ฟรี
Nato_One
Newbie
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 72



ดูรายละเอียด
« ตอบ #3 เมื่อ: 06 กันยายน 2011, 11:06:21 »

#footer {
       position:absolute;
       bottom:0;
       left:0;
   width: 1000px;
        height:50px;

   padding: 20px 0;
   padding: 15px 35px;
   text-align: center;
   color: #ffffff;
   font-weight:bold;
   background: url(../images/background.gif) repeat-x;
}


ลองเอาไปปรับใช้ดูนะครับ ต้องอยู่ในกรอบ div warper ที่ความสูง 100% ด้วยนะครับ


ถ้าใช้ browser  IE  ไม่สามารถใช้งานได้ค่ะ รบกวนหน่อยนะค่ะ ว่าคำสั่งที่ใช้ กับ IE  นั้น เป็นคำสั่งไหนค่ะ
บันทึกการเข้า
bananaoxy
Verified Seller
ก๊วนเสียว
*

พลังน้ำใจ: 26
ออฟไลน์ ออฟไลน์

กระทู้: 352



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 06 กันยายน 2011, 16:51:34 »

มีคำถามเดจาวูด้วย มะกี้กำลังนั่ง ปรับ CSS แล้วมีปัญหากับ IE
มารอคำตอบด้วยคนครับ
บันทึกการเข้า

kitazawa1st
สมุนแก๊งเสียว
*

พลังน้ำใจ: 29
ออฟไลน์ ออฟไลน์

กระทู้: 563



ดูรายละเอียด
« ตอบ #5 เมื่อ: 07 กันยายน 2011, 01:12:12 »

position: fixed;
บันทึกการเข้า

เล็กสั้น ขยันซอย
CodeArmy
คนรักเสียว
*

พลังน้ำใจ: 26
ออฟไลน์ ออฟไลน์

กระทู้: 102



ดูรายละเอียด
« ตอบ #6 เมื่อ: 07 กันยายน 2011, 01:34:31 »

ให้ layout มันเต็ม หน้าจอทั้งแนวตั้งและแนวนอนหรือป่าวคับ
โค๊ด:
<body style="margin:0; padding:0;">
<div style="position:absolute; margin:0; width:100%; height:100%; padding:0;">
<div style="margin:0; width:100%; height:25%; padding:0; background:#03F;">
        Header
    </div>
        <div style="margin:0; width:100%; height:60%; padding:0; background:#09F;">
        Content
        </div>
        <div style="margin:0; width:100%; height:15%; padding:0; background:#006;">
        Footer
        </div>
</div>
</body>
บันทึกการเข้า

การให้ "อภัย" เป็นสิ่งที่ควรทำอย่างยิ่ง เพราะว่าการตอบโต้ ไม่ว่าจะด้วยกาย ด้วยวาจา ด้วยใจก็ตาม เป็นการสร้างกรรมต่อ ท้ายสุดกรรมนั้นก็จะย้อนมาสู่ตัวเอง
ในเมื่อเขาสร้างกรรม เราไม่รับ ถึงวาระมันบรรจบครบรอบ คนสร้างก็รับไปเอง แต่ถ้าหากเราไปรับแล้วตอบโต้ก็จะกลายเป็นสิ่งที่ต่อกรรมสืบเนื่องกันไป ไม่มีที่สิ้นสุด
ก็แปลว่ายังยินดีที่จะเกิดต่อ....
chanun
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 69
ออฟไลน์ ออฟไลน์

กระทู้: 1,912



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 07 กันยายน 2011, 02:08:31 »

position: fixed;

อันนี้ครับ ลองค้นใน google ต่อดู fixed และ bottom และตำแหน่งต่อนะครับ
บันทึกการเข้า



ซื้อเครื่องเล่นเกมคุณภาพและเช็คราคา PS4 PS3 PSP XBOX WII 3DS ได้ที่นี้
psp ราคา
kitazawa1st
สมุนแก๊งเสียว
*

พลังน้ำใจ: 29
ออฟไลน์ ออฟไลน์

กระทู้: 563



ดูรายละเอียด
« ตอบ #8 เมื่อ: 07 กันยายน 2011, 11:53:24 »

position: fixed;

อันนี้ครับ ลองค้นใน google ต่อดู fixed และ bottom และตำแหน่งต่อนะครับ

เพิ่มเติม ในส่วนของเนื้อหาหลัก อย่าลืม margin-bottom ตามความสูงของ footer นะครับ เด๋วจะโดนบัง  Tongue
บันทึกการเข้า

เล็กสั้น ขยันซอย
หน้า: [1]   ขึ้นบน
พิมพ์