741

รับ HTML ต่อไปนี้:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

ฉันต้องการที่จะติดด้านล่างของ#copyright#container

ฉันสามารถทำสิ่งนี้ได้โดยไม่ใช้ตำแหน่งแน่นอนหรือไม่? หากคุณสมบัติลอยสนับสนุนค่าของ 'ด้านล่าง' ดูเหมือนว่าจะทำเคล็ดลับ แต่น่าเสียดายที่มันไม่ได้

html css

— Dónal
แหล่งที่มา

211

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

— Tomalak

ฉันไม่เข้าใจคำถาม ทำไมคุณต้องใช้การกำหนดตำแหน่งแบบสัมบูรณ์เลย? คอนเทนเนอร์มีความสูงที่กำหนดไม่ว่าจะมีเนื้อหาอยู่ในบรรจุภัณฑ์หรือไม่

— HartleySan

921

ไม่น่าจะ

กำหนดposition:relativeไป#containerแล้วเพื่อposition:absolute; bottom:0;#copyright

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

ขยายตัวอย่างข้อมูล

— ผู้ใช้งาน
แหล่งที่มา

10

หากตำแหน่ง: สัมพัทธ์บนคอนเทนเนอร์แบ่งการออกแบบของคุณจำไว้ว่าคุณสามารถรวม div wrapper ไว้ในคอนเทนเนอร์ด้วยความสูง 100% และเพิ่ม position: สัมพันธ์กับตำแหน่งนั้น

— Jack Shepherd

และถ้ามันมีไว้สำหรับองค์ประกอบที่ทำซ้ำซึ่งเป็นอย่างอื่นจะวางอยู่ด้านบนของแต่ละอื่น ๆ ?

— CRICE

6

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

— user17753

1

เพิ่ม margin-bottom ไปที่ #container เพื่อป้องกันลิขสิทธิ์ของเนื้อหาในหน้า

— Doc Kodam

1

วิธีการ Flexbox ด้านล่างดีกว่ามาก

— woohoo

345

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

วิธีที่ใช้กันโดยทั่วไปในการทำเช่นนี้คือ "CSS sticky footer" ซึ่งแสดงให้เห็นถึงวิธีการหรือรูปแบบที่บางกว่าเล็กน้อย วิธีนี้ใช้งานได้ดี - หากคุณมีส่วนท้ายที่มีความสูงคงที่

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

กลืนความภาคภูมิใจของคุณและใช้ตาราง

ตัวอย่างเช่น:

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}

<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>

ขยายตัวอย่างข้อมูล

ลองดู สิ่งนี้จะใช้ได้กับทุกขนาดหน้าต่างสำหรับปริมาณเนื้อหาใด ๆ สำหรับส่วนท้ายขนาดใด ๆ ในทุกเบราว์เซอร์ ... แม้แต่ IE6

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

ตารางไม่เจ๋ง แต่อย่างน้อยตอนนี้บางครั้งก็เป็นวิธีที่ดีที่สุดในการแก้ปัญหาการออกแบบ

— Rick Reilly
แหล่งที่มา

80

ดูเหมือนว่าคำตอบที่ดีที่สุดสำหรับฉัน นอกจากนี้คุณสามารถใช้ "css tables" (display: table [-row / -cell]) แทนการใช้ตาราง html ที่ให้รูปแบบเดียวกันโดยไม่มีความหมาย

— chiccodoro

1

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

— Tyzoid

20

สำหรับคนอื่นที่อ่านความคิดเห็นเหล่านี้: สิ่งนี้ไม่เกี่ยวกับ "ความภาคภูมิใจ" หรือ "เจ๋ง" การใช้ตารางสำหรับเลย์เอาต์ในทางปฏิบัติจะยิ่งเจ็บปวดยิ่งขึ้นโดยเฉพาะกับเนื้อหาจำนวนมาก ตรวจสอบให้แน่ใจว่าคุณไม่พลาดทีดีและกลั่นกรองมาร์กอัปที่ไม่เกี่ยวข้องอย่างมากเมื่อเพิ่มเนื้อหาคือนรก มันเป็นความเจ็บปวดเพราะเรากำลังสร้างเอกสาร HTML ไม่ใช่แค่เลย์เอาต์และหากเนื้อหาส่วนใหญ่ในเอกสารของเราไม่ใช่ข้อมูลแบบตารางเราจะวางเอกสารในตารางทำไม หากเราไม่ชอบการใช้เทคโนโลยีเว็บในแบบที่พวกเขาตั้งใจทำทำไมถึงใช้มัน? การใช้คอมพิวเตอร์ / ปพลิเคชันโทรศัพท์มือถือเพื่อเผยแพร่เนื้อหาแทน

— เกบ

1

@chiccodoro ฉันได้ดำเนินตารางน้อยเทียบเท่าซึ่งมีน้อยน่าแปลกใจที่การตรวจสอบคำตอบของฉันด้านล่าง

— Hashbrown

59

ความภาคภูมิใจไม่เกี่ยวข้อง ไม่ควรใช้ตารางในการจัดวางเนื่องจากเหตุผลในการเข้าถึง หากคุณเคยใช้โปรแกรมอ่านหน้าจอคุณจะรู้ว่าเหตุใดจึงควรใช้ตารางสำหรับข้อมูลแบบตารางเท่านั้น ใช้ตาราง css เป็นสถานะ @chiccodoro

— Matt Fellows

170

วิธีการ flexbox!

ในเบราว์เซอร์ที่รองรับคุณสามารถใช้สิ่งต่อไปนี้:

ตัวอย่างที่นี่

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

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

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

ขยายตัวอย่างข้อมูล

วิธีการแก้ปัญหาข้างต้นอาจมีความยืดหยุ่นมากกว่าอย่างไรก็ตามนี่เป็นทางเลือกอื่น:

ตัวอย่างที่นี่

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

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

.parent {
  height: 100px;
  border: 5px solid #000;
  display: flex;
}
.child {
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;
}

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

ขยายตัวอย่างข้อมูล

ในฐานะที่เป็นบันทึกด้านข้างคุณอาจต้องการเพิ่มคำนำหน้าผู้ขายสำหรับการสนับสนุนเพิ่มเติม

— Josh Crozier
แหล่งที่มา

3

วิธีการเกี่ยวกับcolumn-reverseผู้ปกครองเพื่อให้คุณไม่จำเป็นต้องเพิ่มอะไรให้เด็กได้ทั้งหมดหรือไม่

— Max Waterman

1

นี่น่าจะเป็นคำตอบที่ยอมรับได้ - ไม่มีแฮ็คไม่มีการจัดตำแหน่งที่แน่นอนล้นทำงานได้อย่างหมดจดเมื่อจำเป็น (สำหรับฉัน)

— Adverbly

114

ใช่คุณสามารถทำได้โดยไม่ต้องabsoluteจัดตำแหน่งและไม่ต้องใช้tables (สกรูตัวใดที่มีมาร์กอัปและอื่น ๆ )

DEMO
นี่คือการทดสอบการทำงานบน IE> 7, chrome, FF & เป็นสิ่งที่ง่ายมากที่จะเพิ่มไปยังเค้าโครงที่มีอยู่ของคุณ

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

มันจะทำสิ่งที่มีประสิทธิภาพfloat:bottomแม้กระทั่งการบัญชีสำหรับปัญหาที่ระบุในคำตอบของ @Rick Reilly!

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

1

ดี! เพียงแค่ทราบว่า IIRC คุณต้องมี<!DOCTYPE>ชุดเพื่อให้ทำงานบน IE (<= 8 อย่างน้อย); เวอร์ชั่นเก่าเหล่านั้นรองรับเฉพาะdisplay:table-XXXในโหมด "มาตรฐาน" แต่โหมดมาตรฐานจะแบ่งหน้าเป็นจำนวนมากที่ออกแบบมาสำหรับ IE6

— David

3

นอกจากนี้คุณยังสามารถใช้ flexbox - stackoverflow.com/questions/526035/…

— Josh Crozier

2

.foot{display: table-footer-group}ผมพบว่าโชคดีมากขึ้นด้วย ฉันไม่จำเป็นต้องvertical-align, หรือheight border-collapse

— Jacob Valenta

มันจะใช้งานได้หาก#containerมีเพียง#footและไม่มีเนื้อหาอื่น ๆ ?

— Solace

ดูเหมือนว่าอย่างน้อยก็จะต้องมีพื้นที่ไม่ทำลาย @Solace

— Hashbrown

20

เป็นคำถามเก่า แต่นี่เป็นวิธีการที่ไม่ซ้ำใครที่สามารถช่วยได้ในหลายกรณี

CSS ที่บริสุทธิ์โดยไม่มีตำแหน่งแน่นอนไม่ต้องแก้ไขความสูงข้ามเบราว์เซอร์ (IE9 +)

ตรวจสอบว่าWorking Fiddle

เนื่องจากการไหลตามปกติคือ 'จากบนลงล่าง' เราไม่สามารถขอให้#copyrightdiv ติดกับด้านล่างของพ่อแม่ของเขาโดยไม่กำหนดตำแหน่งบางอย่าง แต่ถ้าเราต้องการให้#copyrightdiv ติดกับด้านบนของพ่อแม่มัน จะง่ายมาก - เพราะนี่เป็นวิธีการไหลปกติ

ดังนั้นเราจะใช้มันเพื่อประโยชน์ของเรา เราจะเปลี่ยนลำดับของdivs ใน HTML ตอนนี้#copyrightdiv อยู่ที่ด้านบนสุดและเนื้อหาติดตามได้ทันที นอกจากนี้เรายังทำให้เนื้อหา div ยืดไปตลอดทาง (โดยใช้องค์ประกอบหลอกและเทคนิคการล้าง)

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

เราหมุนคอนเทนเนอร์ด้วย 180deg และตอนนี้: ขึ้น - ลง (และเรากลับเนื้อหากลับมาเป็นปกติอีกครั้ง)

หากเราต้องการมีสครูลบาร์ภายในพื้นที่เนื้อหาเราจำเป็นต้องใช้เวทย์มนตร์ CSS เพิ่มอีกนิด ตามที่สามารถแสดงได้ที่นี่ [ในตัวอย่างนั้นเนื้อหาอยู่ใต้ส่วนหัว - แต่เป็นแนวคิดเดียวกัน]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

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

2

โปรดอย่าดูสิว่าการเรนเดอร์นั้นน่ากลัวแค่ไหนตอนนี้i.stack.imgur.com/ZP9Hw.png

— grg

7

สร้างภาชนะอื่นสำหรับองค์ประกอบดังกล่าวข้างต้นdiv #copyrightลิขสิทธิ์ด้านบนเพิ่มใหม่div: <div style="clear:both;"></div> มันจะบังคับให้ส่วนท้ายอยู่ภายใต้ทุกสิ่งเช่นเดียวกับในกรณีของการใช้การจัดตำแหน่งแบบสัมพัทธ์ ( bottom:0px;)

— RápliAndrás
แหล่งที่มา

7

ลองสิ่งนี้

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

— Gary Green
แหล่งที่มา

1

@ Feelsbadman โปรดอย่าเปลี่ยนรหัสของคนอื่นในคำตอบอย่างนั้น หากคุณตั้งใจที่จะแยก CSS ออกจาก HTML โปรดทราบว่าคุณเปลี่ยนรหัสไปเป็นอย่างอื่นโดยไม่ตั้งใจซึ่งอาจเป็นการตอบโต้คำตอบและเปลี่ยนความตั้งใจของผู้โพสต์

— TylerH

6

ในขณะที่ไม่มีคำตอบใด ๆ ที่ให้ไว้ที่นี่ดูเหมือนจะนำไปใช้หรือทำงานในกรณีของฉันโดยเฉพาะฉันพบบทความนี้ซึ่งให้วิธีการแก้ปัญหาที่เป็นระเบียบนี้:

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

ฉันพบว่ามันมีประโยชน์มากสำหรับการใช้การออกแบบที่ตอบสนองต่อการแสดงผลมือถือโดยไม่ต้องเรียงลำดับรหัส html ทั้งหมดของเว็บไซต์ใหม่อีกครั้ง bodyเป็นตาราง

โปรดทราบว่าเพียงครั้งแรกtable-footer-groupหรือtable-header-groupจะแสดงผลเป็นเช่น: ถ้ามีมากกว่าหนึ่งคนอื่น ๆ table-row-groupจะได้รับการแสดงผลเป็น

— Skippy le Grand Gourou
แหล่งที่มา

6

CSS Grid

เนื่องจากการใช้งาน CSS Grid กำลังเพิ่มขึ้นฉันอยากจะแนะนำalign-selfองค์ประกอบที่อยู่ในคอนเทนเนอร์กริด

align-selfสามารถมีค่าใด ๆ นี้: end, self-end, flex-endสำหรับตัวอย่างต่อไปนี้

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>

ขยายตัวอย่างข้อมูล

— มาโนจมาร์
แหล่งที่มา

5

แน่นอนคุณสามารถalignกล่องbottomโดยไม่ต้องใช้position:absoluteถ้าคุณรู้ว่าheightการ#containerใช้คุณสมบัติการจัดตำแหน่งข้อความของinline-blockองค์ประกอบ

ที่นี่คุณสามารถเห็นมันในการกระทำ

นี่คือรหัส:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

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

5

การใช้คุณสมบัติ translateY และ top

เพียงตั้งองค์ประกอบลูกให้อยู่ในตำแหน่ง: สัมพัทธ์และย้ายไปด้านบน: 100% (นั่นคือความสูง 100% ของผู้ปกครอง) และติดกับด้านล่างของผู้ปกครองด้วยการแปลง: translateY (-100%) (ที่ -100% ของความสูงของ เด็ก).

ประโยชน์ที่ได้รับ

คุณทำไม่ได้ใช้องค์ประกอบจากโฟลว์หน้า
มันเป็นแบบไดนามิก

แต่ก็ยังมีวิธีแก้ปัญหาเพียง :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

อย่าลืมคำนำหน้าสำหรับเบราว์เซอร์รุ่นเก่า

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

4

CodePen เชื่อมโยงที่นี่

html, body {
    width: 100%;
    height: 100%;
}

.overlay {
    min-height: 100%;
    position: relative;
}

.container {
    width: 900px;
    position: relative;
    padding-bottom: 50px;
}

.height {
    width: 900px;
    height: 50px;
}

.footer {
    width: 900px;
    height: 50px;
    position: absolute;
    bottom: 0;
}

<div class="overlay">
    <div class="container">
        <div class="height">
            content
        </div>
    </div>

    <div class="footer">
        footer
    </div>
</div>

ขยายตัวอย่างข้อมูล

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

3

หากคุณต้องการให้ "ติด" ที่ด้านล่างโดยไม่คำนึงถึงความสูงของภาชนะการจัดตำแหน่งแบบสัมบูรณ์เป็นวิธีที่จะไป แน่นอนว่าหากองค์ประกอบลิขสิทธิ์เป็นองค์ประกอบสุดท้ายในคอนเทนเนอร์มันจะอยู่ที่ด้านล่างเสมอ

คุณสามารถขยายคำถามของคุณ? อธิบายสิ่งที่คุณพยายามจะทำ (และทำไมคุณไม่ต้องการใช้การจัดตำแหน่งที่แน่นอน)

— แจ็ค Sleight
แหล่งที่มา

2

นอกจากนี้ถ้ามีข้อกำหนดเกี่ยวกับการใช้position:absolute;หรือposition:relative;คุณสามารถลองpadding ปกครอง หรือการวางdiv margin-top:x;ไม่ใช่วิธีที่ดีในกรณีส่วนใหญ่ แต่อาจมีประโยชน์ในบางกรณี

— Ghost Echo
แหล่งที่มา

1

บางทีนี่อาจช่วยใครซักคน: คุณสามารถวาง div ไว้ข้างนอก div อื่น ๆ แล้วผลักมันขึ้นด้านบนโดยใช้ระยะขอบติดลบ:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

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

1

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

ขยายตัวอย่างข้อมูล

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

ขยายตัวอย่างข้อมูล

— Anmol Ratan Mohla
แหล่งที่มา

1

ไม่ต้องการใช้ "ตำแหน่ง: เด็ดขาด" สำหรับท้ายกระดาษที่ด้านล่าง จากนั้นคุณสามารถทำสิ่งนี้:

 html,
        body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            min-height: 100%;
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
        }
        .footer{
            background: #000;
            text-align: center;
            color: #fff;
        }
        .footer,
        .push {
            height: 50px;
        }

<html>
<body>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>

ขยายตัวอย่างข้อมูล

— nilesh pawar
แหล่งที่มา

สวัสดี nilesh; โซลูชันนี้มีให้ในหลายคำตอบแล้ว โปรดอ่านคำตอบที่มีอยู่ทั้งหมดก่อนที่จะตอบคำถามใหม่เพื่อให้แน่ใจว่าไม่มีเนื้อหาซ้ำซ้อน!

— TylerH

1

หากคุณไม่ทราบความสูงของบล็อกเด็ก:

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

ขยายตัวอย่างข้อมูล

http://jsbin.com/ULUXIFon/3/edit

หากคุณทราบความสูงของบล็อกย่อยให้เพิ่มบล็อกย่อยจากนั้นเพิ่ม padding-top / margin-top:

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}

<div id="parent">
    <div class="child">child
    </div> 
</div>

ขยายตัวอย่างข้อมูล

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

0

เพียงเพราะสิ่งนี้ไม่ได้รับการกล่าวถึงสิ่งที่มักจะทำงานได้ดีในสถานการณ์เช่นคุณ:

วางลิขสิทธิ์ div หลังจาก container-div

คุณจะต้องจัดรูปแบบลิขสิทธิ์ div ในลักษณะที่คล้ายกับคอนเทนเนอร์อื่น ๆ (ความกว้างโดยรวมที่เหมือนกันการจัดกึ่งกลาง ฯลฯ ) และทั้งหมดนั้นใช้ได้

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

เวลาเดียวที่อาจไม่เหมาะคือเมื่อมีการประกาศ container-div ของคุณheight:100%และผู้ใช้จะต้องเลื่อนลงเพื่อดูลิขสิทธิ์ แต่คุณยังสามารถแก้ไขได้ (เช่นmargin-top:-20px- เมื่อความสูงขององค์ประกอบลิขสิทธิ์ของคุณคือ 20px)

ไม่มีตำแหน่งแน่นอน
ไม่มีเค้าโครงตาราง
ไม่มี CSS บ้าที่ดูแตกต่างจากเบราว์เซอร์อื่น ๆ (อย่างน้อย IE ก็รู้)
การจัดรูปแบบง่ายและชัดเจน

นอกเหนือ: ฉันรู้ว่า OP ขอวิธีแก้ปัญหาที่"... ยึดติดกับด้านล่างของ 'container' div ... "และไม่ใช่สิ่งที่อยู่ภายใต้มัน แต่มาเลยผู้คนกำลังมองหาวิธีแก้ปัญหาที่ดีที่นี่และสิ่งนี้ เป็นหนึ่ง!

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

ในกรณีของ OP วิธีนี้จะใช้ได้ก็ต่อเมื่อ #copyright มีความสูงคงที่เท่านั้น (จากนั้นคุณสามารถตั้งค่าmargin-top: -{element height}ได้

— Gajus

@Gajus: นี่ไม่ใช่ตำแหน่งแน่นอนหรือแน่นอน สิ่งนี้ทำในสิ่งที่ OP ต้องการอย่างแท้จริง (ไม่ว่าจะมีความสูงด้านลิขสิทธิ์) โดยมีข้อยกเว้นเพียงอย่างเดียวว่าลิขสิทธิ์ div ไม่ได้อยู่ในคอนเทนเนอร์แรก OP ขอลิขสิทธิ์ติดที่ด้านล่างของภาชนะไม่ใช่หน้า !!

— Levite

ขออภัยฉันไม่ได้หมายความว่าถ้าคอนเทนเนอร์ # คอนเทนเนอร์มีความสูงคงที่

— Gajus

เว้นแต่ฉันเข้าใจผิดว่าตัวเองปัญหาที่แท้จริงว่า OP จะพยายามที่จะแก้ปัญหาคือด้านล่างขององค์ประกอบเมื่อความสูงองค์ประกอบเป็น dictated โดยองค์ประกอบอื่นเช่นมีความคิดเห็นjsbin.com/acoVevI/3 ที่นี่คุณไม่สามารถวางปุ่มนอกคอนเทนเนอร์ได้ เพื่อเป็นการแสดงให้เห็นถึงปัญหาดูjsbin.com/acoVevI/4

— Gajus

OP กล่าวว่า: "ฉันต้องการ #copyright ติดที่ด้านล่างของ #container" ดังนั้นนี่จึงไม่ชัดเจนโดยสิ้นเชิงจากคำถาม ยิ่งกว่านั้นนี่เป็นตัวอย่างที่ถูกต้องสำหรับกรณีใด ๆ ที่ควร "ยึดติดกับด้านล่างของ #container" วิธีแก้ปัญหานี้ควรมีประโยชน์มีแนวทางที่สะอาดและใช้งานได้ดีกับเค้าโครงหลายแบบ เช่นหน้าใด ๆ ที่มีเนื้อหาการเลื่อนเช่น stackoverflow.com ;-)

— Levite

0

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

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

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

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

0

ไม่มีสิ่งใดถูกเรียกfloat:bottomใน CSS วิธีที่ดีที่สุดคือใช้การวางตำแหน่งในกรณีเช่นนี้:

position:absolute;
bottom:0;

— Touhid Rahman
แหล่งที่มา

กรุณาอธิบายคำตอบของคุณ

— Mohit Raj Purohit

0

สำหรับผู้ที่มีลูกเพียงคนเดียวในภาชนะคุณสามารถใช้table-cellและvertical-alignวิธีการที่ทำงานได้อย่างน่าเชื่อถือสำหรับการวาง div เดี่ยวที่ด้านล่างของพาเรนต์

โปรดทราบว่าการใช้table-footer-groupเป็นคำตอบอื่น ๆ ที่กล่าวถึงจะเป็นการทำลายการคำนวณความสูงของพาเรนtableต์

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}

<div id="container">
    <div id="item">Single bottom item</div>
</div>

ขยายตัวอย่างข้อมูล

— ไห่จาง
แหล่งที่มา

0

ตาม: w3schools.com

องค์ประกอบที่มีตำแหน่ง: สัมบูรณ์; อยู่ในตำแหน่งที่สัมพันธ์กับบรรพบุรุษที่อยู่ใกล้ที่สุด (แทนตำแหน่งที่สัมพันธ์กับวิวพอร์ตเช่นแก้ไข)

ดังนั้นคุณต้องวางตำแหน่งองค์ประกอบหลักด้วยบางสิ่งบางอย่างที่สัมพันธ์กันหรือสัมบูรณ์ ฯลฯ และวางตำแหน่งองค์ประกอบที่ต้องการให้เป็นค่าสัมบูรณ์และหลังสุดเป็น 0

— Jonas Freire
แหล่งที่มา

เรื่องนี้ถูกกล่าวถึงแล้วในคำตอบที่ยอมรับ (ในหมู่คนอื่น ๆ )

— TylerH

-1

Div ของสไตล์position:absolute;bottom:5px;width:100%;ใช้งานได้ แต่มันต้องการสถานการณ์การเลื่อนเพิ่มเติม

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

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

ฉันจะวาง div ของฉันไว้ที่ด้านล่างของคอนเทนเนอร์ได้อย่างไร

วิธีการ flexbox!

CSS ที่บริสุทธิ์โดยไม่มีตำแหน่งแน่นอนไม่ต้องแก้ไขความสูงข้ามเบราว์เซอร์ (IE9 +)

CSS Grid

การใช้คุณสมบัติ translateY และ top