CSS เพื่อให้ส่วนท้ายของหน้า HTML อยู่ที่ด้านล่างของหน้าด้วยความสูงขั้นต่ำ แต่ไม่ทับหน้า

379

ฉันมีหน้าต่อไปนี้ (deadlink: http://www.workingstorage.com/Sample.htmที่มีส่วนท้ายที่ฉันไม่สามารถนั่งที่ด้านล่างของหน้า

ฉันต้องการให้ส่วนท้าย

  • ติดที่ด้านล่างของหน้าต่างเมื่อหน้าสั้นและหน้าจอไม่เต็มและ
  • อยู่ที่จุดสิ้นสุดของเอกสารและเลื่อนลงตามปกติเมื่อมีมากกว่าหน้าจอเนื้อหา (แทนที่จะซ้อนทับเนื้อหา)

CSS นั้นสืบทอดมาและทำให้ฉันงุนงง ฉันไม่สามารถเปลี่ยนแปลงได้อย่างถูกต้องเพื่อเพิ่มความสูงขั้นต่ำในเนื้อหาหรือทำให้ส่วนท้ายไปด้านล่าง

css  footer 
— Caveatrob
แหล่งที่มา
16
มันวิเศษมากที่นี่เป็นปัญหาที่พบบ่อย บางทีใน CSS4 เราจะเห็นการใช้งานของ "สร้างแถบนำทาง" และ "สร้างส่วนท้าย" เนื่องจากมีการพยายามทำเช่นนี้บ่อยครั้ง
— isomorphismes
1
จะไม่มี CSS4 (CSS3 จะเติบโต) flexboxฉันคิดว่านี้จะถูกแก้ไขด้วยการดำเนินงานของ
— Marijke Luttekes
1
บทความที่ยอดเยี่ยมเกี่ยวกับเรื่องนี้: css-tricks.com/couple-takes-sticky-footer
— Phil
— Lalit Baghel

คำตอบ:

345

วิธีง่าย ๆ คือการทำให้เนื้อความ100%ของหน้าของคุณด้วยmin-heightของ100%มากเกินไป วิธีนี้ใช้งานได้ดีหากความสูงของส่วนท้ายไม่เปลี่ยนแปลง

ให้ส่วนท้ายของส่วนต่างติดลบ:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
— จอน Winstanley
แหล่งที่มา
27
ใช้งานได้ก็ต่อเมื่อคุณทราบความสูงของท้ายกระดาษล่วงหน้า บางครั้งท้ายกระดาษมีเนื้อหาแบบไดนามิกหรือสร้างกรอบงานของคุณ ความคิดใด ๆ สำหรับท้ายกระดาษความสูงตัวแปร?
— Costa
@Costa ตรวจสอบคำตอบของฉันที่นี่เพื่อดูวิธีการแก้ปัญหาที่ทำงานกับส่วนท้ายที่มีความสูงผันแปรได้
— Jose Rui Santos
สำหรับเนื้อหาแบบไดนามิกเพียงละเว้น "ความสูง" และส่วนท้ายจะปรับให้เข้ากับเนื้อหา ไม่ได้ทดสอบในเบราว์เซอร์ทั้งหมด
— m47730
สิ่งนี้อาจต้องใช้box-sizing: border-box;กับร่างกาย [และ#container]
— konsolebox
ดูเหมือนว่ามีกลอุบายแปลก ๆ มากมายมีคำตอบด้านล่างที่เรียบง่ายและไม่ใช้กลอุบาย
— Andrew Koster
165

ฉันได้พัฒนาวิธีการที่ค่อนข้างง่ายในการติดท้ายกระดาษที่ด้านล่าง แต่วิธีการทั่วไปส่วนใหญ่คุณจะต้องปรับแต่งเพื่อให้พอดีกับส่วนสูงของท้ายกระดาษ

ดูตัวอย่าง

วิธีการ Flexbox:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
ขยายตัวอย่างข้อมูล

วิธีการด้านล่างนี้ใช้ "เล่ห์เหลี่ยม" โดยการวาง::afterองค์ประกอบหลอกไว้บนbodyและตั้งค่าให้มีความสูงที่แน่นอนของส่วนท้ายดังนั้นมันจะครอบครองพื้นที่เดียวกันแน่นอนที่ส่วนท้ายทำดังนั้นเมื่อส่วนท้ายอยู่ในabsoluteตำแหน่งนั้น มันจะดูเหมือนว่าส่วนท้ายของพื้นที่จริง ๆ และกำจัดผลกระทบเชิงลบของการวางตำแหน่งที่แน่นอน (ตัวอย่างเช่นไปมากกว่าเนื้อหาของร่างกาย)

position:absolute วิธีการ: (ไม่อนุญาตความสูงส่วนท้ายแบบไดนามิก)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
ขยายตัวอย่างข้อมูล

วิธีการจัดวางตาราง:

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
ขยายตัวอย่างข้อมูล

— vSync
แหล่งที่มา
เรียบง่ายและสง่างามและที่สำคัญกว่านั้นใช้งานได้ โซลูชั่นอื่น ๆ ที่ล้มเหลวเมื่อคุณเริ่มต้นการเพิ่ม divs display: table display: table-row display:table-cellกับ อย่างไรก็ตามฉันพบว่าฉันต้องเพิ่มbody {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}เพื่อหลีกเลี่ยงแถบเลื่อน คุณสามารถรองรับสิ่งนี้ได้โดยการปรับbody:after heightแต่ฉันกำลังระบุของฉันใน rem ไม่ใช่ px ดังนั้นมันจึงกลายเป็นปัญหา
— Steve Waring
3
@SteveWaring - ขอบคุณ อัปเดตคำตอบนี้เพราะมันค่อนข้างเก่า ตอนนี้ฉันชอบที่จะใช้flexbox
— vsync
1
CSS ภายใต้ "มาร์กอัปพื้นฐานทั่วไป" มีข้อผิดพลาดเล็กน้อยซึ่งทำให้ไม่สามารถใช้งานได้ (ข้อผิดพลาดไม่มีอยู่ใน "DEMO" ที่เชื่อมโยงซึ่งก็โอเค) ฉันเอาเสรีภาพในการแก้ไข
— sleske
3
ขอบคุณ! วิธีการแก้ปัญหา flexbox นั้นง่ายมากและไม่ใช้แฮ็กหรือขนาดคงที่แปลก ๆ หรือตำแหน่งคงที่
— Andrew Koster
1
ตัวอย่างนี้เป็นตัวอย่างเดียวที่ใช้งานได้! เยี่ยมมากขอบคุณ!
— Drakinite
51

วิธีการง่ายๆที่ใช้งานได้ดีกับเบราว์เซอร์ข้ามคือ:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
ขยายตัวอย่างข้อมูล

— Tamás Pap
แหล่งที่มา
34

ฉันเคยใช้สิ่งนี้เพื่อติดท้ายกระดาษของฉันไปที่ด้านล่างและมันได้ผลสำหรับฉัน:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

นั่นคือการดัดแปลงเพียงอย่างเดียวที่คุณต้องทำใน HTML เพิ่มมันdivด้วย"allButFooter"คลาส ฉันทำกับทุกหน้าสั้น ๆ ฉันรู้ว่าส่วนท้ายจะไม่ยึดติดกับด้านล่างและหน้ายาวพอที่ฉันรู้แล้วว่าต้องเลื่อน ฉันทำสิ่งนี้ดังนั้นฉันสามารถเห็นว่ามันใช้ได้ดีในกรณีที่เนื้อหาของหน้าเว็บเป็นแบบไดนามิก

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

"allButFooter"ระดับมีmin-heightค่าที่ขึ้นอยู่กับวิวพอร์ตของความสูง ( 100vhหมายถึง 100% ของความสูงวิวพอร์ต) 40pxและความสูงของส่วนท้ายที่ฉันรู้แล้วเป็น

นั่นคือทั้งหมดที่ฉันทำและมันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน ฉันไม่ได้ลองในเบราว์เซอร์ทุกตัวแค่ Firefox, Chrome และ Edge และผลลัพธ์ก็เป็นไปตามที่ฉันต้องการ ส่วนท้ายของแท่งอยู่ที่ด้านล่างและคุณไม่ต้องยุ่งกับดัชนี z ตำแหน่งหรือคุณสมบัติอื่น ๆ ตำแหน่งขององค์ประกอบทุกอย่างในเอกสารของฉันคือตำแหน่งเริ่มต้นฉันไม่ได้เปลี่ยนเป็นแบบสัมบูรณ์หรือแบบคงที่หรืออะไรก็ตาม

ทำงานกับการออกแบบที่ตอบสนองได้ดี

นี่คือสิ่งที่ฉันต้องการจะล้างออก การแก้ปัญหานี้ด้วยส่วนท้ายเดียวกันที่เป็น 40px Twitter-Bootstrapสูงไม่ได้ทำงานตามที่ผมคาดไว้เมื่อผมทำงานในการออกแบบที่ตอบสนองต่อการใช้ ฉันต้องแก้ไขค่าที่ฉันถูกแทนที่ในฟังก์ชัน:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

อาจเป็นเพราะTwitter-Bootstrapมาพร้อมกับระยะขอบและช่องว่างภายในของตัวเองดังนั้นฉันจึงต้องปรับค่านั้น

ฉันหวังว่านี่จะเป็นประโยชน์สำหรับพวกคุณบางคน! อย่างน้อยก็เป็นวิธีง่ายๆในการลองใช้และไม่เกี่ยวข้องกับการเปลี่ยนแปลงครั้งใหญ่ในเอกสารทั้งหมด

— N. Larrieux
แหล่งที่มา
ฉันประสบปัญหากับการแก้ไขปัญหาทุกประเภท วิธีนี้ใช้ได้กับหน้าเว็บของฉันที่เปลี่ยนแปลงสิ่งที่ปรากฏในเนื้อหาโดยใช้display: noneThanks มันดีและเรียบง่ายเช่นกัน
— Steve Waring
หลังจากพยายามแก้ปัญหาหลายชั่วโมงทำงานเพียงสองครั้งเท่านั้น position: fixed; bottom: 0และอันนี้ วิธีนี้เป็นวิธีที่ดีที่สุดเนื่องจากส่วนท้ายไม่ยึดติดกับด้านล่าง แต่อยู่ที่ส่วนท้ายของหน้าเลื่อน
— Hmerman6006
.footer {max-height: calc(100vh+40px); position: absolute}ที่จะสร้างคำตอบของคุณคุณสามารถมองไปที่มันอีกทางหนึ่งโดยการตั้งค่า นอกจากนี้ยังใช้งานได้คุณควรรู้ขนาดร่างกายของคุณ
— Hmerman6006
29

จาก IE7 เป็นต้นไปคุณสามารถใช้

#footer {
    position:fixed;
    bottom:0;
}

ดูcaniuse ที่ให้การสนับสนุน

— เลียม
แหล่งที่มา
77
ฉันไม่ต้องการให้ส่วนท้ายอยู่ด้านล่างเมื่อมีเนื้อหาเกินกว่าส่วนท้าย ฉันต้องการให้ส่วนท้ายติดด้านล่างเมื่อมีไม่เพียงพอแล้วขยายลงตามปกติเมื่อมีมากกว่าหน้าจอ ท้ายกระดาษเหนียวแก้ปัญหานี้
— Caveatrob
@Caveatrob: ฉันใช้เสรีภาพในการแก้ไขข้อมูลสำคัญนี้ในคำถามของคุณเพียงเพื่อหลีกเลี่ยงความเข้าใจผิด (สำหรับผู้อ่านในอนาคตคุณได้แก้ไขเรื่องนี้ในเวลาเดียวกัน :-))
— sleske
โซลูชันนี้เป็นเพียงส่วนท้ายเดียวที่พิมพ์ไปยังทุกหน้าและมันง่ายมาก! แต่ฉันไม่สามารถทำงานได้ว่าเนื้อหาไม่ทับซ้อนกับเนื้อหาหลัก ใครมีวิธีแก้ปัญหานี้?
— Hatzen
15

ทางออกง่ายๆที่ฉันใช้งานได้จาก IE8 +

ให้ความสูงขั้นต่ำ: 100% ใน html ดังนั้นหากเนื้อหาน้อยกว่าหน้ายังคงใช้ความสูงของพอร์ตการดูแบบเต็มและท้ายกระดาษติดที่ด้านล่างของหน้า เมื่อเนื้อหาเพิ่มขึ้นท้ายกระดาษจะเลื่อนลงตามเนื้อหาและเกาะติดกับด้านล่าง

JS fiddle สาธิตการทำงาน: http://jsfiddle.net/3L3h64qo/2/

css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
— Sanjeev
แหล่งที่มา
เป็นเรื่องที่ดี .. แต่เพิ่งอัปเดต. pageContentWrapper {padding-bottom: 100px; / * ความสูงของท้ายกระดาษ * /}
— Subodh Sharma
ขอบคุณมาก. ทำงานกับ Angular 7
— Carlos Torres
ฉันไม่ต้องการสร้างแถบเลื่อนที่ไม่จำเป็นเมื่อทำได้
— КонстантинВан
14

อีกวิธีที่ง่ายมากก็คือ

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

เคล็ดลับคือใช้display:tableสำหรับเอกสารทั้งหมดและdisplay:table-rowด้วยheight:0สำหรับส่วนท้าย

เนื่องจากส่วนท้ายเป็นเนื้อหาย่อยเท่านั้นที่มีจอแสดงผลtable-rowจึงแสดงผลที่ด้านล่างของหน้า

— Jose Rui Santos
แหล่งที่มา
ฉันรักตาราง css แต่พวกเขาสร้างปัญหาในบรรทัดที่ค่อนข้างแปลก: stackoverflow.com/questions/24898115/…
— Costa
1
วิธีนี้ดูเหมือนว่าจะใช้งานไม่ได้เลย - Firefox เพิกเฉยความสูงส่วนท้าย 0 ฉันใช้ความสูง 1px หรือ 1% แทน Edge, IE11, Chrome และ Safari มือถือมีความสุขกับ 0
— Kitet
ฉันชอบวิธีนี้มาก แต่เมื่อฉันสร้างเลย์เอาต์ของฉันเช่นนี้การคำนวณเบราว์เซอร์ขององค์ประกอบลูกหลานได้รับการยกย่อง สมมติว่าเราต้องการให้มีคอนเทนเนอร์ที่ด้านบนของหน้าและต้องเป็นheight: 100%จริง 100% เมื่ออัตราส่วนวิวพอร์ตเท่ากับ 1/1 (สี่เหลี่ยมจัตุรัส) เมื่อวิวพอร์ตที่ได้รับความกว้าง (แนวนอน) สูงกว่า 100% และหากแคบลง (แนวตั้ง) น้อยกว่า 100% ดังนั้นความสูงจึงเป็นสัดส่วนกับความกว้างของหน้าต่าง พยายามแก้ไขด้วยเสื้อคลุมอีกอัน แต่วิธีนี้ใช้ไม่ได้ ใครบางคนมีทางออกหรือเพื่อไม่ให้คำใบ้ ???
— Axel
@Axel ในรุ่นนี้ฉันได้เพิ่ม div สีน้ำเงินที่ด้านบนด้วยความสูง 100% ที่ตรงกับความสูงทั้งหมด (ลบส่วนสูงท้ายกระดาษ) โดยไม่คำนึงถึงความกว้างของวิวพอร์ต ฉันคิดว่าคุณอาจมี CSS สิ่งอื่น ๆ ยุ่ง พยายามสร้างปัญหาที่ย่อเล็กสุดของคุณโดยยึดตาม jsFiddle ดั้งเดิมของฉัน
— Jose Rui Santos
— Axel
8

วิธีการแก้ปัญหาแบบง่าย ๆ ที่ไม่ได้พิจารณาความสูงคงที่หรือเปลี่ยนตำแหน่งขององค์ประกอบ

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

สนับสนุนเบราว์เซอร์

เบราว์เซอร์หลักทั้งหมดยกเว้น IE11 และต่ำกว่า

ตรวจสอบให้แน่ใจว่าใช้Autoprefixerสำหรับคำนำหน้าที่เหมาะสม

แสดงตัวอย่างโค้ด

— m.spyratos
แหล่งที่มา
ทำงานเหมือนจับใจ! แม้แต่ res สำหรับส่วนท้ายมากกว่า 4k sticks ที่ด้านล่าง
— Arpan Banerjee
7

สิ่งหนึ่งที่ต้องระวังคืออุปกรณ์มือถือเนื่องจากใช้แนวคิดของวิวพอร์ตในลักษณะที่ 'ผิดปกติ':

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

ดังนั้นการใช้position: fixed;(ตามที่ฉันเคยเห็นแนะนำในที่อื่น) มักจะไม่ใช่วิธีที่จะไป แน่นอนมันขึ้นอยู่กับพฤติกรรมที่แน่นอนของคุณ

สิ่งที่ฉันใช้และทำงานได้ดีบนเดสก์ท็อปและมือถือคือ:

<body>
    <div id="footer"></div>
</body>

กับ

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
— เบ็นแจ็คสัน
แหล่งที่มา
6

ทำเช่นนี้

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

คุณยังสามารถอ่านเกี่ยวกับ flex ได้รับการสนับสนุนโดยเบราว์เซอร์ที่ทันสมัยทั้งหมด

อัปเดต : ฉันอ่านดิ้นและลองใช้ มันใช้งานได้สำหรับฉัน หวังว่ามันจะเหมือนกันสำหรับคุณ นี่คือวิธีที่ฉันใช้งานนี่คือหลักไม่ใช่ ID มันคือ div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

ที่นี่คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

โปรดทราบว่า IE เวอร์ชันเก่าไม่รองรับ

— Aarth Tandel
แหล่งที่มา
1
นี่คือคำตอบที่ดีที่สุดในการปฏิบัติ การใช้flex-grow: 1บางอย่างเหนือส่วนท้ายจะทำให้ส่วนท้ายที่ด้านล่างถูกต้อง
— iBug
5

ฉันเพิ่งตอบเป็นคำถามที่คล้ายกันที่นี่:

ตำแหน่งท้ายกระดาษที่ด้านล่างของหน้ามีส่วนหัวคงที่

ฉันค่อนข้างใหม่ในการพัฒนาเว็บและฉันรู้ว่าคำตอบนี้ได้รับการตอบแล้ว แต่นี่เป็นวิธีที่ง่ายที่สุดที่ฉันพบว่าสามารถแก้ปัญหาได้และฉันคิดว่ามันต่างออกไป ฉันต้องการบางสิ่งบางอย่างที่ยืดหยุ่นเพราะส่วนท้ายของเว็บแอปของฉันมีความสูงแบบไดนามิกฉันลงเอยด้วยการใช้ FlexBox และตัวเว้นวรรค

  1. เริ่มต้นด้วยการตั้งค่าความสูงสำหรับ html และเนื้อหาของคุณ
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

ฉันสมมติว่ามีcolumnพฤติกรรมสำหรับแอพของเราในกรณีที่คุณต้องเพิ่มส่วนหัวฮีโร่หรือเนื้อหาใด ๆ ที่จัดแนวตั้ง

  1. สร้างคลาสสเปเซอร์
.spacer {
    flex: 1; 
}
  1. ดังนั้นในภายหลังบน HTML ของคุณอาจเป็นเช่นนั้น 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

คุณสามารถเล่นกับมันได้ที่นี่ https://codepen.io/anon/pen/xmGZQL

— Camo
แหล่งที่มา
5

สิ่งนี้เรียกว่าส่วนท้ายเหนียว การค้นหาของ Googleมันเกิดขึ้นกับผลลัพธ์จำนวนมาก CSS Sticky Footerเป็นสิ่งที่ฉันเคยใช้มาแล้ว แต่มีมากกว่านั้น

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
ขยายตัวอย่างข้อมูล

แหล่งที่มาสำหรับรหัสนี้

— เปาโล Bergantino
แหล่งที่มา
3

วิธีการ jquery ของฉันอันนี้วางส่วนท้ายที่ด้านล่างของหน้าถ้าเนื้อหาของหน้าน้อยกว่าความสูงของหน้าต่างหรือเพียงวางส่วนท้ายหลังเนื้อหามิฉะนั้น:

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

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
— แซมโจนส์
แหล่งที่มา
3

ฉันเองก็มองปัญหานี้อยู่ ฉันได้เห็นวิธีแก้ปัญหาค่อนข้างน้อยและแต่ละคนมีปัญหามักเกี่ยวข้องกับเวทมนตร์บางอย่าง

ดังนั้นการใช้แนวทางปฏิบัติที่ดีที่สุดจากแหล่งต่าง ๆ ฉันจึงได้วิธีนี้:

http://jsfiddle.net/vfSM3/248/

สิ่งที่ฉันต้องการบรรลุโดยเฉพาะที่นี่คือการได้รับเนื้อหาหลักเพื่อเลื่อนระหว่างส่วนท้ายและส่วนหัวภายในพื้นที่สีเขียว

นี่คือ CSS ง่าย ๆ :

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
— husayt
แหล่งที่มา
3
ฉันเกลียดไซต์ที่ออกแบบมาเช่นนี้ เหตุใดคุณต้องการ จำกัด จำนวนข้อความที่ฉันสามารถอ่านได้ในเวลาเดียวกัน ฉันไม่ต้องการเห็นหัวกระดาษและท้ายกระดาษตลอดเวลาฉันรู้ว่าจะหาได้ที่ไหนเมื่อต้องการ
— Tarmil
1
@Tarmil มีลักษณะที่numerics.info คุณเห็นตอนนี้เมื่อสิ่งนี้มีประโยชน์หรือไม่?
— husayt
3

นี่คือวิธีที่ฉันแก้ไขปัญหาเดียวกัน

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
ขยายตัวอย่างข้อมูล

— Nemus
แหล่งที่มา
2

เพียงปรับแต่งส่วนท้ายกระดาษ

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>
— rashedcs
แหล่งที่มา
ไม่ทำงาน. มันมักจะติดอยู่ด้านล่างแม้ว่าเราจะมีหน้าใหญ่มาก มันไม่สามารถเลื่อนได้ด้วยทุกหน้า แต่แค่เลื่อนไปด้านล่าง
— fWd82
ใช้งานไม่ได้ Footer กำลังมาด้านบนของเนื้อหา
— indolentdeveloper
1

นี่คือสองเซ็นต์ของฉัน ในการเปรียบเทียบกับโซลูชันอื่น ๆ เราไม่จำเป็นต้องเพิ่มคอนเทนเนอร์เพิ่มเติม ดังนั้นวิธีนี้จึงดูสง่างามกว่าเล็กน้อย ใต้ตัวอย่างโค้ดฉันจะอธิบายว่าทำไมสิ่งนี้ถึงได้ผล

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

ดังนั้นสิ่งแรกที่เราทำคือสร้างคอนเทนเนอร์ที่ใหญ่ที่สุด (html) 100% หน้า html นั้นใหญ่เท่ากับหน้าของมันเอง ต่อไปเราตั้งค่าความสูงของร่างกายสามารถใหญ่กว่าแท็ก html ได้ 100% แต่อย่างน้อยควรใหญ่ดังนั้นเราใช้ความสูงขั้นต่ำ 100%

เรายังทำให้ร่างกายของญาติ สัมพัทธ์หมายความว่าคุณสามารถย้ายองค์ประกอบบล็อกรอบ ๆ ญาติจากตำแหน่งเดิม เราไม่ได้ใช้สิ่งนี้ที่นี่ เนื่องจากญาติมีการใช้งานที่สอง องค์ประกอบแบบสัมบูรณ์ใด ๆ ก็ได้คือค่าสัมบูรณ์ต่อรูต (html) หรือแก่ผู้ปกครอง / ญาติคนแรก นั่นคือสิ่งที่เราต้องการเราต้องการให้ส่วนท้ายเป็นแบบสัมบูรณ์สัมพันธ์กับร่างกายคือด้านล่าง

ขั้นตอนสุดท้ายคือการตั้งค่าส่วนท้ายให้เป็นสัมบูรณ์และด้านล่าง: 0 ซึ่งย้ายไปที่ด้านล่างของผู้ปกครอง / ปู่ย่าตายายแรกที่มีความสัมพันธ์ (เนื้อความของหลักสูตร)

ตอนนี้เรายังมีปัญหาหนึ่งที่ต้องแก้ไขเมื่อเราเติมเต็มหน้าเนื้อหาจะอยู่ใต้ส่วนท้าย ทำไม? ดีเพราะส่วนท้ายไม่อยู่ใน "html flow" อีกต่อไปเพราะมันเป็นแบบสัมบูรณ์ แล้วเราจะแก้ไขได้อย่างไร เราจะเพิ่ม padding-bottom เข้ากับร่างกาย นี่ทำให้แน่ใจว่าร่างกายใหญ่กว่าเนื้อหา

ฉันหวังว่าฉันจะทำให้ชัดเจนสำหรับพวกคุณ

— เดวิด
แหล่งที่มา
1

ไดนามิกหนึ่งไลเนอร์โดยใช้ jQuery

วิธี CSS ทั้งหมดที่ฉันเจอนั้นเข้มงวดเกินไป นอกจากนี้การตั้งค่าส่วนท้ายfixedเป็นไม่ใช่ตัวเลือกหากไม่ใช่ส่วนหนึ่งของการออกแบบ

ทดสอบเมื่อ:

  • Chrome: 60
  • FF: 54
  • IE: 11

สมมติว่าเค้าโครงนี้:

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

ใช้ฟังก์ชั่น jQuery ต่อไปนี้:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

อะไรที่ไม่ถูกตั้งค่าmin-heightสำหรับการ#contentไปที่ความสูงหน้าต่าง - ความสูงของส่วนท้ายสิ่งที่เคยที่อาจจะมีในช่วงเวลานั้น

เนื่องจากเราใช้min-heightถ้า#contentความสูงเกินความสูงของหน้าต่างฟังก์ชันจะลดระดับลงอย่างงดงามและไม่ส่งผลใด ๆ เนื่องจากไม่จำเป็น

ดูการทำงาน:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
ขยายตัวอย่างข้อมูล

ตัวอย่างเดียวกันบนJsFiddle

โบนัส:

เราสามารถนำสิ่งนี้ไปใช้เพิ่มเติมและทำให้ฟังก์ชั่นนี้ปรับให้เข้ากับการปรับขนาดความสูงของวิวเวอร์แบบไดนามิกเช่น:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
ขยายตัวอย่างข้อมูล

— ฉันเป็นรหัส
แหล่งที่มา
0

เพียงตั้งค่า html, body และแถวอื่น ๆ ยกเว้นส่วนท้ายเป็น 100% เช่น

<body>
<header></header>
<content></content>
<footer></footer>

css กลายเป็น 

html, body, header, content{
height:100%;
}
— Olatunde G.
แหล่งที่มา
0 
<!DOCTYPE html>

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

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
— ซานเจซี
แหล่งที่มา
0

เกี่ยวกับที่:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
— novecentonove
แหล่งที่มา
ในขณะที่รหัสนี้อาจตอบคำถาม แต่มีบริบทเพิ่มเติมเกี่ยวกับสาเหตุและ / หรือวิธีการที่รหัสนี้ตอบคำถามช่วยปรับปรุงมูลค่าระยะยาว
— β.εηοιτ.βε
-1

ฉันใช้ในหลายโครงการและไม่เคยมีปัญหาใด ๆ :)

สำหรับการอ้างอิงของคุณรหัสอยู่ในข้อมูลโค้ด 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
ขยายตัวอย่างข้อมูล

— Santosh Khalse
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.