ทำให้ div อยู่ที่ด้านล่างของเนื้อหาของหน้าตลอดเวลาแม้ว่าจะมีแถบเลื่อน

261

โปรดดูที่ลิงก์นั้นฉันต้องการสิ่งที่ตรงกันข้าม: เมื่อเนื้อหาล้นไปยังแถบเลื่อนฉันต้องการให้ส่วนท้ายของฉันอยู่ในสภาพสมบูรณ์ตลอดเวลาด้านล่างของหน้าเช่นกองมากเกิน

ฉันมี div ด้วยid="footer"และ CSS นี้:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

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

ภาพ: Examlple

ขออภัยหากไม่ได้รับการชี้แจงฉันไม่ต้องการให้แก้ไขเพื่อให้อยู่ที่ด้านล่างสุดของเนื้อหาทั้งหมดเท่านั้น

— H เบลลามี่
แหล่งที่มา

1

ลองposition:fixedแม้ว่าจะไม่เป็นวิธีที่ดีที่สุดที่จะทำ

— redDevil

ลองตำแหน่ง: สัมพันธ์กับร่างกาย

1

คุณไม่ได้ปิด หลังจากที่ตำแหน่ง: แน่นอน มันจะทำงานได้อย่างสมบูรณ์แบบเป็นอย่างอื่น!

— AlexHighHigh

545

นี่คือสิ่งที่position: fixedถูกออกแบบมาสำหรับ:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

นี่คือซอ: http://jsfiddle.net/uw8f9/

— โจเซฟไซเบอร์
แหล่งที่มา

65

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

— vsync

10

@aroth นั่นเป็นเพราะพวกเขาเป็นสองโซลูชั่นที่แตกต่างกันโดยสิ้นเชิง วิธีนี้จะทำให้ส่วนท้ายที่ด้านล่างของพื้นที่ภาพของหน้าจอตลอดเวลา โซลูชันทางเลือกช่วยให้ส่วนท้ายที่ด้านล่างของหน้าจอหรือด้านล่างของหน้าขึ้นอยู่กับที่มีขนาดใหญ่ - ซึ่งเป็นสิ่งที่ผู้ถามร้องขอ

— หัวของฉันเจ็บ

6

@ MyHeadHurts - คุณพูดถูก หลังจากตอบฉันรู้ว่านี่ไม่ใช่สิ่งที่ OP ต้องการ แต่ฉันทิ้งไว้ที่นี่เพื่อคนที่กำลังมองหาส่วนท้ายแบบเรียบง่าย จากความคิดเห็น (และโหวต) ดูเหมือนว่าหลายคนกำลังดิ้นรนกับคุณสมบัติ CSS เบื้องต้นนี้

— Joseph Silber

1

@ MyHeadHurts - ยุติธรรมพอ แต่สำหรับเงินของฉันพวกเขาทั้งสองยังคงเหมือนเดิม เลื่อนเนื้อหาภายใต้fixedส่วนท้ายเมื่อมีเนื้อหาเพียงพอที่จะทำ ดีพอสำหรับฉัน แน่นอนฉันสามารถดูว่าท้ายกระดาษขนาดใหญ่มากเช่นสิ่งที่พวกเขามีใน stackoverflow จะไม่ทำงานได้ดีกับfixedวิธีการ แต่สำหรับท้ายกระดาษหนึ่งบรรทัดขั้นพื้นฐานวิธีนี้ใช้งานได้ดีในความคิดของฉัน

— aroth

@aroth ฉันเห็นด้วยนี่เป็นทางออกที่ดีและทุกอย่างขึ้นอยู่กับสิ่งที่คุณต้องการ ฉันแค่ชี้ให้เห็นว่าทำไมวิธีหนึ่งจึงซับซ้อนกว่าอีกวิธี -> พวกเขาไม่ทำแบบเดียวกัน

— หัวของฉันเจ็บ

187

น่าเสียดายที่คุณไม่สามารถทำได้โดยไม่เพิ่ม HTML พิเศษอีกเล็กน้อยและการมี CSS ชิ้นเดียวต้องพึ่งพาสิ่งอื่น

HTML

แรกที่คุณต้องห่อของคุณheader, footerและ#bodyเป็น#holderdiv:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

จากนั้นตั้งค่าheight: 100%เป็น( htmlและbodyตัวจริงไม่ใช่#bodydiv ของคุณ) เพื่อให้แน่ใจว่าคุณสามารถตั้งค่าความสูงขั้นต่ำเป็นเปอร์เซ็นต์ขององค์ประกอบลูก

ตอนนี้ตั้งค่าmin-height: 100%บน#holderdiv ดังนั้นจึงเติมเนื้อหาของหน้าจอและใช้position: absoluteในการนั่งท้ายกระดาษที่ด้านล่างของ#holderdiv

น่าเสียดายที่คุณต้องสมัครpadding-bottomกับ#bodydiv ที่มีความสูงเท่ากับfooterเพื่อให้มั่นใจว่าเนื้อหาfooterไม่ได้อยู่เหนือเนื้อหาใด ๆ :

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

ตัวอย่างการทำงานตัวย่อ: http://jsfiddle.net/ELUGc/

ตัวอย่างการทำงานตัวยาว: http://jsfiddle.net/ELUGc/1/

— ฉันปวดหัว
แหล่งที่มา

ฉันไม่เข้าใจว่าทำไมความกว้าง: 100%; จำเป็นต้องใช้

— Somnath Kharat

4

@sTACKoVERFLOW - หากคุณไม่ได้ระบุwidth หรือทั้งสอง leftและrightแล้วค่าที่มีการตั้งค่าautoและองค์ประกอบจะตัดให้พอดีกับเนื้อหา การระบุwidth: 100% หรือ left: 0และright:0เพื่อให้แน่ใจว่าองค์ประกอบตำแหน่งอย่างใช้เวลาเต็มความกว้างขององค์ประกอบภาชนะ

— หัวของฉันเจ็บ

ฉันกำลังมองหาพฤติกรรมที่คล้ายกัน แต่ในกรณีของฉัน #body div ถูกลอยโดยพูดว่า "float: left" ตัวอย่างเนื้อความสั้นใช้งานได้ แต่ตัวอย่างเนื้อความที่ยาวไม่ทำงาน ข้อเสนอแนะใด ๆ ที่ฉันจะได้รับพฤติกรรมที่ต้องการโดยใช้ลอยใน #body div

— Jatin

@Ian กล่าวว่าในคำตอบเพราะเขาไม่มีตัวแทนมากพอที่จะแสดงความคิดเห็น: หากคุณมีปัญหาใน asp.net พร้อมคำตอบจาก 'My Head Hurts' - คุณต้องเพิ่ม 'height: 100%' ให้กับ main สร้างแท็ก FORM รวมถึงแท็ก HTML และ BODY เพื่อให้สามารถใช้งานได้

— msouth

หากคุณกำลังพยายามทำให้สิ่งนี้ทำงานใน div แทนที่จะเป็นทั้งร่างกายต้องแน่ใจว่าคุณระบุองค์ประกอบที่มีheight=100%อยู่ทั้งหมดรวมถึง<form>องค์ประกอบด้วย

— Ben Caine

13

เพิ่งได้ผลสำหรับโซลูชันอื่นเนื่องจากตัวอย่างด้านบนมีข้อบกพร่อง (ข้อผิดพลาดบางแห่ง) สำหรับฉัน การเปลี่ยนแปลงจากคำตอบที่เลือก

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

สำหรับรูปแบบ html

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

ด้วยวิธีนี้ไม่รองรับเบราว์เซอร์เก่า แต่เป็นที่ยอมรับได้สำหรับเบราว์เซอร์เก่าถึง scrolldown 30px เพื่อดูส่วนท้าย

plunker

— ไม่ระบุชื่อ
แหล่งที่มา

5

ฉันรู้ว่าจะไม่ใช้สิ่งนี้ในการ 'ตอบสนองต่อคำตอบอื่น ๆ ' แต่น่าเสียดายที่ฉันไม่มีตัวแทนเพียงพอที่จะเพิ่มความคิดเห็นลงในคำตอบที่เหมาะสม (!) แต่ ...

หากคุณมีปัญหาใน asp.net กับคำตอบจาก 'My Head Hurts' - คุณต้องเพิ่ม 'height: 100%' ลงในแท็ก FORM หลักที่สร้างขึ้นรวมถึงแท็ก HTML และ BODY เพื่อให้สามารถใช้งานได้

— เอียน
แหล่งที่มา

4

คุณไม่ได้ปิด หลังจากที่ตำแหน่ง: แน่นอน มิฉะนั้นโค้ดข้างต้นของคุณจะทำงานได้อย่างสมบูรณ์แบบ!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

— AlexHighHigh
แหล่งที่มา

3

ฉันจะแสดงความคิดเห็นหากฉันสามารถ แต่ฉันยังไม่มีสิทธิ์ดังนั้นฉันจะโพสต์คำใบ้เป็นคำตอบสำหรับพฤติกรรมที่ไม่คาดคิดในอุปกรณ์ Android บาง:

ตำแหน่ง: แก้ไขใช้งานได้กับ Android 2.1 ถึง 2.3 โดยใช้เมตาแท็กต่อไปนี้:

<meta name="viewport" content="width=device-width, user-scalable=no">.

ดูhttp://caniuse.com/#search=position

— Tarciso Junior
แหล่งที่มา

2

นี่เป็นโซลูชันที่ใช้งานง่ายโดยใช้คำสั่ง viewport ที่เพิ่งตั้งค่าความสูงต่ำสุดเป็นความสูงวิวพอร์ตลบความสูงส่วนท้าย

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}

— Obromios
แหล่งที่มา

1

ฉันได้แก้ไขปัญหาที่คล้ายกันโดยใส่เนื้อหาหลักทั้งหมดของฉันไว้ในแท็ก div พิเศษ (id = "outer") ฉันได้ย้ายแท็ก div ด้วย id = "footer" นอกแท็ก div "outer" ล่าสุดนี้ ฉันใช้ CSS เพื่อระบุความสูงของ "outer" และระบุความกว้างและความสูงของ "footer" ฉันยังใช้ CSS เพื่อระบุระยะขอบซ้ายและระยะขอบขวาของ "ส่วนท้าย" เป็นอัตโนมัติ ผลที่ได้คือว่าส่วนท้ายตั้งอยู่ที่ด้านล่างของหน้าของฉันและเลื่อนไปยังหน้าด้วย (แม้ว่าจะยังคงปรากฏใน div "outer" แต่อย่างมีความสุขนอก div "เนื้อหา" หลักซึ่งดูเหมือนแปลก แต่มันก็แปลก ที่ที่ฉันต้องการ)

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

1

ฉันต้องการเพิ่ม - คำตอบส่วนใหญ่ทำงานได้ดีสำหรับฉัน อย่างไรก็ตามมันใช้เวลานานกว่าจะทำให้มันทำงานได้!

นี่เป็นเพราะการตั้งค่าheight: 100%เพียงหยิบความสูงของผู้ปกครอง!

ดังนั้นหาก html ทั้งหมดของคุณ (ด้านในของร่างกาย) มีลักษณะดังต่อไปนี้:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

จากนั้นต่อไปนี้จะถูกปรับ:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

... ในฐานะ "ผู้ถือ" จะรับความสูงได้โดยตรงจาก "ร่างกาย"

รุ่งโรจน์ต่อ My Head Hurts ซึ่งคำตอบคือคำตอบที่ฉันได้ไปทำงาน!

อย่างไรก็ตาม หาก html ของคุณซ้อนกันมากขึ้น (เพราะเป็นเพียงองค์ประกอบของหน้าเต็มหรืออยู่ในคอลัมน์ที่แน่นอน ฯลฯ ) คุณต้องตรวจสอบให้แน่ใจว่าองค์ประกอบที่มีทุกองค์ประกอบนั้นได้height: 100%ตั้งค่าไว้ใน div ด้วย มิฉะนั้นข้อมูลความสูงจะหายไประหว่าง "ร่างกาย" และ "ผู้ถือ"

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

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

และอย่าลืมตั้งค่าความสูงของคลาสเต็มความสูงใน css:

#full-height{
    height: 100%;
}

ที่แก้ไขปัญหาของฉัน!

— ทิมแอล
แหล่งที่มา

0

หากคุณมีส่วนท้ายที่มีความสูงคงที่ (ตัวอย่างเช่น 712px) คุณสามารถทำได้ด้วย js ดังนี้:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

— George Carlin
แหล่งที่มา

0

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

— Praveen Kundu
แหล่งที่มา

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

— FZs

-2

ใช้คลาสบูตสแตรปคงที่

<div id="footer" class="fixed-bottom w-100">

— Gowtham Sooryaraj
แหล่งที่มา

OP ไม่มีข้อบ่งชี้ว่ากำลังใช้ Bootstrap

— TylerH