สร้างองค์ประกอบส่วนท้ายที่อยู่ใต้หน้าจอ

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

ฉันจะทำสิ่งนี้ให้สำเร็จโดยใช้ CSS ได้อย่างไร

แก้ไข

ฉันเหนื่อย:

#footer{
    position:absolute;
    left:0px;
    top:100%;
}

ใช้งานได้ แต่จะขัดขวางหากเพจของฉันไม่เกินความสูงของหน้าจอ ฉันต้องการความเข้ากันได้สำหรับเพจทั้งสองประเภทจริงๆ


html layout css footer
person Hope4You    schedule 27.10.2012    source แหล่งที่มา
comment
โฆษณาแก้ไข) ลองตั้งค่า margin-top: -HEIGHT   -  person J. K.    schedule 28.10.2012
comment
@IanKuca ความสูงขึ้นอยู่กับขนาดของหน้า   -  person Hope4You    schedule 28.10.2012
comment
ความสูงของส่วนท้าย? นั่นเป็นคนเกียจคร้าน   -  person J. K.    schedule 28.10.2012
comment
@IanKuca ฉันพยายามพิมพ์ความสูงของส่วนท้ายซึ่งใช้งานได้ แต่ส่วนท้ายจะเข้ามาขวางทางหากหน้าจริงของฉันเกินความสูงของหน้าจอ หากหน้าเว็บเกินความสูงของหน้าจอ ฉันต้องการให้ส่วนท้ายอยู่ใต้สิ่งอื่นทั้งหมด   -  person Hope4You    schedule 28.10.2012

คำตอบ (2)


arrow_upward
1
arrow_downward

นี่คือตัวอย่างง่ายๆ ของเค้าโครงที่คุณอธิบาย:

HTML

<html>
<head><title>Hidden Footer</title></head>
<body>
    <div id="content">
        Content here
    </div>
    <div id="footer">
        Footer here
    </div>
</body>
</html>

ซีเอสเอส

html,
body { height: 100%; min-height: 100%; }

#content { min-height: 100%; }
#footer { background: #ccc; }
person Kevin Boucher    schedule 27.10.2012
comment
ฉันลองใช้โค้ดตัวอย่างของคุณแล้ว และใช้งานได้ดี ไม่ว่า content ของฉันจะยาวแค่ไหนก็ตาม! ขอบคุณ - person Hope4You; 28.10.2012
comment
มีวิธีใดบ้างในการทำเช่นนี้โดยไม่ต้องเพิ่มแอตทริบิวต์ CSS เหล่านั้นให้กับ html และ body ฉันต้องการเก็บแท็กเหล่านี้ให้ปราศจากแอตทริบิวต์ประเภทนี้ - person Hope4You; 28.10.2012
comment
โดย 'แอตทริบิวต์' คุณหมายถึง CSS ที่ใช้กับองค์ประกอบเหล่านั้นหรือไม่ ถ้าเป็นเช่นนั้นก็น่าเสียดายที่ไม่มี สไตล์เหล่านั้นจำเป็นต้องดันส่วนท้ายไว้ใต้วิวพอร์ต (ฉันจะไม่มีข้อสงวนใด ๆ เกี่ยวกับการเพิ่ม CSS ให้กับองค์ประกอบทั้งสองนั้น โดยจะทำตลอดเวลาสำหรับเลย์เอาต์ที่ 'สัมพันธ์กับวิวพอร์ต') พื้นที่เนื้อหาจะไม่ขยายเป็น 100% หากไม่มีเนื้อหาและคอนเทนเนอร์ html อนุญาต . - person Kevin Boucher; 28.10.2012

arrow_upward
0
arrow_downward

เพจที่คุณเชื่อมโยงมีส่วนหัวคงที่ ส่วนที่เหลือของร่างกายเลื่อนอย่างเหมาะสม

ดูส่วนหัว/ส่วนท้ายของ CSS คงที่เพื่อจำลองเอฟเฟกต์

person Lowkase    schedule 27.10.2012
comment
ความสูงของหน้าจอของคุณคือเท่าไร? เมื่อฉันปรับขนาดเบราว์เซอร์บนหน้าที่เชื่อมโยง ส่วนท้ายจะปรากฏเสมอหลังจากที่ฉันเริ่มเลื่อน ตราบใดที่ฉันยังมีช่องว่างอยู่หลังแบบฟอร์มการติดต่อ - person Hope4You; 28.10.2012
comment
ฉันจะใช้ส่วนท้ายแบบตายตัวได้อย่างไร ฉันไม่ต้องการให้ส่วนท้ายปรากฏขึ้นทันที - person Hope4You; 28.10.2012